antd 弹窗form 提交

如果你想在 Ant Design 的弹窗中使用 Form 组件并提交表单数据，可以按照以下步骤操作：

1. 在弹窗中使用 Form 组件。可以使用 `Form.create()` 方法创建一个高阶组件，将 Form 组件的 props 中注入一个 `form` 对象，该对象包含了表单的操作方法和属性。

import { Form, Input, Modal } from 'antd';

const MyForm = Form.create({ name: 'my_form' })(props => {
  const { visible, onCancel, onCreate, form } = props;
  const { getFieldDecorator } = form;
  return (
    <Modal
      visible={visible}
      title="Create a new item"
      onCancel={onCancel}
      onOk={onCreate}
    >
      <Form layout="vertical">
        <Form.Item label="Name">
          {getFieldDecorator('name', {
            rules: [{ required: true, message: 'Please input the name of the item!' }],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="Description">
          {getFieldDecorator('description')(<Input type="textarea" />)}
        </Form.Item>
      </Form>
    </Modal>
  );
});

2. 定义弹窗的显示状态以及处理弹窗的显示和隐藏事件。

import { useState } from 'react';

const MyFormContainer = () => {
  const [visible, setVisible] = useState(false);

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

  const handleCreate = () => {
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }

      // TODO: 处理表单数据的提交
      console.log('Received values of form: ', values);

      form.resetFields();
      setVisible(false);
    });
  };

  return (
    <>
      <Button onClick={() => setVisible(true)}>Create</Button>
      <MyForm
        visible={visible}
        onCancel={handleCancel}
        onCreate={handleCreate}
      />
    </>
  );
};

3. 在 `handleCreate` 函数中处理表单数据的提交。可以使用 `form.validateFields()` 方法验证表单数据，如果验证通过，则将数据提交给服务器。

const handleCreate = () => {
  const { form } = this.props;
  form.validateFields((err, values) => {
    if (err) {
      return;
    }

    // 发送数据到服务器
    fetch('/api/items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values),
    }).then(() => {
      form.resetFields();
      setVisible(false);
    });
  });
};

以上就是在 Ant Design 弹窗中使用 Form 组件并提交表单数据的完整代码示例。