React类组件中如何获取Antd模态框表单的提交值

嗨，我来帮你搞定React类组件里Antd模态框内嵌表单拿不到数据的问题～

函数组件里用Form.useForm()确实方便，但类组件得换个方式——用React Ref来获取表单实例，然后手动处理验证和数据收集。下面是具体的解决步骤和示例：

核心思路 #

类组件无法使用Hook，所以我们通过React.createRef()拿到Form的实例，在Modal的onOk事件里调用表单的验证/取值方法，从而获取提交数据。

完整代码示例 #

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

class ModalWithForm extends React.Component {
  constructor(props) {
    super(props);
    // 创建表单Ref，用来获取表单实例
    this.formRef = React.createRef();
  }

  // 处理模态框确定按钮的点击事件
  handleOk = () => {
    // 调用表单的验证方法，验证通过后拿到数据
    this.formRef.current.validateFields()
      .then(formValues => {
        // 这里就是你要的表单提交数据！
        console.log('表单数据:', formValues);
        // 接下来可以做提交请求、关闭模态框等操作
        this.props.onModalClose();
      })
      .catch(error => {
        console.log('表单验证失败:', error);
      });
  };

  render() {
    const { isModalVisible, onModalClose } = this.props;
    return (
      <Modal
        title="用户信息表单"
        visible={isModalVisible}
        onOk={this.handleOk}
        onCancel={onModalClose}
        // 关键：把确定按钮的默认htmlType改成button，避免默认表单提交行为
        okButtonProps={{ htmlType: 'button' }}
      >
        {/* 给Form绑定我们创建的ref */}
        <Form ref={this.formRef} layout="vertical">
          {/* 注意：每个需要收集数据的Form.Item必须设置name属性！ */}
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[{ required: true, type: 'email', message: '请输入合法邮箱' }]}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default ModalWithForm;

关键注意点 #

1. 必须给Form.Item设置name：这是Antd表单收集数据的核心，没有name的话表单根本不会记录字段值。
2. 禁用Modal确定按钮的默认提交行为：默认情况下，Modal的ok按钮是htmlType="submit"，会触发表单默认提交（可能导致页面刷新或直接关模态框），所以我们要改成htmlType="button"，完全自己控制流程。
3. 用表单实例的方法获取数据：
   • 如果不需要验证，直接用this.formRef.current.getFieldsValue()就能拿到所有表单数据；
   • 单个字段可以用this.formRef.current.getFieldValue('字段名')。

另一种方式：使用Form的onFinish事件 #

你也可以给Form绑定onFinish事件，在用户提交（比如点击表单内的提交按钮）时拿到数据，但结合Modal的话，通常还是在Modal的onOk里触发验证更符合用户习惯——毕竟用户是点击模态框的确定按钮来提交表单的。

内容的提问来源于stack exchange，提问作者Salah ED