antd 弹窗form 提交

如果你使用的是 Ant Design 的 Modal 组件来创建弹窗，并且希望提交表单，可以按照以下步骤进行：

1. 创建 Modal，并在其中嵌套 Form 组件，例如：

<Modal visible={visible} onCancel={handleCancel} onOk={handleOk}>
  <Form onFinish={handleSubmit}>
    {/* 表单项 */}
  </Form>
</Modal>

2. 在 handleSubmit 函数中处理表单提交，例如：

const handleSubmit = (values) => {
  // values 是表单的值，可以在这里发送请求进行提交
  console.log(values);
};

3. 在 handleOk 函数中调用表单的 submit() 方法，例如：

const handleOk = () => {
  formRef.current.submit();
};

完整的代码示例如下：

import { Modal, Form, Input } from 'antd';
import React, { useRef } from 'react';

const ModalForm = () => {
  const [visible, setVisible] = useState(false);
  const formRef = useRef(null);

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

  const handleOk = () => {
    formRef.current.submit();
  };

  const handleSubmit = (values) => {
    console.log(values);
    // 发送请求进行提交等操作
    setVisible(false);
  };

  return (
    <>
      <button onClick={() => setVisible(true)}>打开弹窗</button>
      <Modal visible={visible} onCancel={handleCancel} onOk={handleOk}>
        <Form onFinish={handleSubmit} ref={formRef}>
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input placeholder="密码" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default ModalForm;