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

2021-08-20  本文已影响0人  刘其瑞
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>
      )}
    </>
上一篇 下一篇

猜你喜欢

热点阅读