antd的模态框，模态框点击取消后，表单数据清空

当antd的Modal组件点击取消后，表单数据清空可以通过以下两种方式实现：

1. 使用Form组件和Form.resetFields()方法
如果你的表单组件使用了antd的Form组件，那么你可以在Modal组件的onCancel回调中调用Form.resetFields()方法来清空表单数据。例如：

const [visible, setVisible] = useState(false);
const [form] = Form.useForm();

const handleCancel = () => {
  form.resetFields(); // 清空表单数据
  setVisible(false); // 隐藏模态框
};

return (
  <div>
    <Button onClick={() => setVisible(true)}>打开模态框</Button>
    <Modal visible={visible} onCancel={handleCancel}>
      <Form form={form}>
        {/* 表单项 */}
      </Form>
    </Modal>
  </div>
);

在上面的代码中，我们使用了Form.useForm()来获取一个表单实例，然后在Modal组件的onCancel回调中调用了form.resetFields()方法来清空表单数据。

2. 使用React状态和setState()方法
如果你的表单组件没有使用antd的Form组件，那么你可以在Modal组件的onCancel回调中使用React的状态和setState()方法来清空表单数据。例如：

const [visible, setVisible] = useState(false);
const [formData, setFormData] = useState({});

const handleCancel = () => {
  setFormData({}); // 清空表单数据
  setVisible(false); // 隐藏模态框
};

const handleInputChange = (event) => {
  const { name, value } = event.target;
  setFormData({ ...formData, [name]: value }); // 更新表单数据
};

return (
  <div>
    <Button onClick={() => setVisible(true)}>打开模态框</Button>
    <Modal visible={visible} onCancel={handleCancel}>
      <Input name="input1" value={formData.input1} onChange={handleInputChange} />
      <Input name="input2" value={formData.input2} onChange={handleInputChange} />
    </Modal>
  </div>
);

在上面的代码中，我们使用了React的useState()方法来定义了一个名为formData的状态，它的初始值为空对象。然后在Modal组件的onCancel回调中调用了setFormData({})方法来清空表单数据。在表单项的onChange回调中，我们使用setFormData()方法来更新表单数据。