React.FC 中使用 Drawer 保存 Form 表单数据

要保存 Drawer 下面的 Form 数据，可以使用 React 的状态管理，在组件中定义一个状态来保存 Form 数据，并在表单字段值发生变化时更新该状态。以下是一个示例代码：

import React, { useState } from 'react';
import { Drawer, Form, Input, Button } from 'antd';

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

  const handleFormChange = (changedFields) => {
    setFormData((prevFormData) => ({
      ...prevFormData,
      ...changedFields,
    }));
  };

  const handleFormSubmit = () => {
    // 在这里可以处理提交表单的逻辑，例如发送请求等
    console.log(formData);
  };

  return (
    <>
      <Button onClick={() => setVisible(true)}>打开抽屉</Button>
      <Drawer
        visible={visible}
        onClose={() => setVisible(false)}
        width={400}
      >
        <Form
          initialValues={formData}
          onValuesChange={handleFormChange}
          onFinish={handleFormSubmit}
        >
          <Form.Item name='name' label='姓名'>
            <Input />
          </Form.Item>
          <Form.Item>
            <Button type='primary' htmlType='submit'>
              提交
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </>
  );
};

export default MyDrawer;

在上述代码中，我们使用 useState 钩子定义了 formData 状态来保存表单数据。handleFormChange 函数会在表单字段值发生变化时被调用，它会接收到一个包含变化字段的对象，我们将这个对象与当前的 formData 合并，然后更新 formData 状态。

在表单的 onValuesChange 属性中指定 handleFormChange 函数，这样每当表单字段值发生变化时，都会调用 handleFormChange 函数来更新 formData 状态。

最后，在表单的 onFinish 属性中指定 handleFormSubmit 函数，这样当表单提交时，就可以获取到最新的 formData 数据并进行处理。在上述示例中，我们只是简单地打印了 formData 数据，你可以根据实际需求进行处理。