react 使用antd（4.x） Modal关闭弹框清空数据问题

在使用modal对话框填写提交表单数据时,通常会有点击编辑展示已经提交的数据的需求

使用的时候遇到一个问题,就是弹框里编辑的内容,关闭弹框后再次打开并不会清空

这个问题的原因可能是因为 Ant Design 的 Modal 组件使用了 unmountOnClose 属性，导致弹窗关闭时组件被卸载，而输入框的值被清空，但是输入框的值仍然被保存在组件的状态中，导致再次打开弹窗时输入框仍然显示之前的值。

解决这个问题的方法有两种：

1. 使用 destroyOnClose 属性

Ant Design 的 Modal 组件还有一个 destroyOnClose 属性，当设置为 true 时，弹窗关闭时会销毁 Modal 组件，这样就可以清除输入框的值。你可以在 Modal 组件上设置 destroyOnClose={true}

例如：

import { Modal, Button, Input } from 'antd';
import { useState } from 'react';

function MyModal() {
  const [visible, setVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const handleOk = () => {
    setVisible(false);
    setInputValue('');
  };

  const handleCancel = () => {
    setVisible(false);
    setInputValue('');
  };

  return (
    <div>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        destroyOnClose={true}
      >
        <Input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      </Modal>
    </div>
  );
}

 注意一点，antd官网提出需要设置

这里我们在 Modal 组件上设置了 destroyOnClose={true}，这样每次弹窗关闭时，组件都会被销毁，输入框的值也会被清除，下次打开弹窗时就不会再显示之前的值了。、

2. 手动清除输入框的值

如果你不想使用 destroyOnClose 属性，也可以在关闭 Modal 时手动清除输入框的值。在 onCancel 和 onOk 事件中，你可以手动将输入框的值设置为空字符串，

例如：

import { Modal, Button, Input } from 'antd';
import { useState } from 'react';

function MyModal() {
  const [visible, setVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const handleOk = () => {
    setVisible(false);
    setInputValue('');
  };

  const handleCancel = () => {
    setVisible(false);
    setInputValue('');
  };

  return (
    <div>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal visible={visible} onOk={handleOk} onCancel={handleCancel}>
        <Input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      </Modal>
    </div>
  );
}

这里我们在 handleOk 和 handleCancel 事件中都将输入框的值设置为空字符串，这样每次关闭弹窗时输入框的值都会被清除，下次打开弹窗时就不会再显示之前的值了。