美文网首页
ant的Modal和Form关闭时销毁表单字段数据(hooks)

ant的Modal和Form关闭时销毁表单字段数据(hooks)

作者: 刘其瑞 | 来源:发表于2021-08-20 19:08 被阅读0次

  • <Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 destroyOnClose。

  • <Modal /> 和 Form 一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要设置 <Form preserve={false} />。

ant的Modal文档中已经写了这俩方法，但我的编辑和添加弹框里表单的值还是延迟一次才更新
解决方法：
  1. Modal窗口我们都有应用一个Visible来控制是否显示， 我们只要利用这个值得变化就可以实现Modal组件的重新挂载了。
{ Visible && <Modal ....../> }
  1. 在useEffect中判断，如果modal状态发生改变，用form.resetFields()重置表单数据
    如果第二种不生效，把Modal的状态值也添加进effect参数中
  useEffect(() => {
    form.resetFields();
  }, [form, Visible]);

最后代码：

useEffect(() => {
    form.resetFields();
  }, [form, Visible]);

  return (
    <>
      {Visible && (
        <Modal
          visible={Visible}
          destroyOnClose
        >
          <Form
            form={form}
            initialValues={}
            preserve={false}
          >
          </Form>
        </Modal>
      )}
    </>

相关文章