React类组件集成Ant Design Modal+Form：useForm报错、Form.create已废弃求助

在Ant Design v4+版本中，类组件可以通过Form组件的ref获取Form实例的方式，替代废弃的Form.create()和无法在类组件中使用的Form.useForm() Hook，同时实现表单提交后清空字段的功能。

核心实现思路 #

通过React的createRef()创建表单引用，绑定到<Form>组件上，从而在类组件的方法中获取Form实例，调用其内置的validateFields()（表单验证）、resetFields()（清空表单）等方法。

完整代码示例 #

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

class ModalForm extends React.Component {
  constructor(props) {
    super(props);
    // 创建表单引用
    this.formRef = React.createRef();
    this.state = {
      modalVisible: false,
    };
  }

  openModal = () => {
    this.setState({ modalVisible: true });
  };

  handleSubmit = () => {
    // 获取表单实例并执行验证
    this.formRef.current.validateFields()
      .then(formValues => {
        // 处理表单提交逻辑（如接口请求）
        console.log('提交的表单数据:', formValues);
        // 验证通过后清空表单
        this.formRef.current.resetFields();
        // 关闭模态框
        this.setState({ modalVisible: false });
      })
      .catch(error => {
        console.log('表单验证失败:', error);
      });
  };

  handleClose = () => {
    this.setState({ modalVisible: false });
    // 关闭模态框时可选择清空表单（根据业务需求调整）
    this.formRef.current.resetFields();
  };

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.openModal}>
          打开表单弹窗
        </Button>
        <Modal
          title="用户信息表单"
          visible={this.state.modalVisible}
          onOk={this.handleSubmit}
          onCancel={this.handleClose}
        >
          {/* 将表单引用绑定到Form组件 */}
          <Form ref={this.formRef} layout="vertical">
            <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>
      </div>
    );
  }
}

export default ModalForm;

关键说明 #

1. 表单引用的创建与绑定：通过this.formRef = React.createRef()创建引用，再将ref={this.formRef}传递给<Form>组件，即可在类方法中通过this.formRef.current获取Form实例。
2. 表单验证与提交：在handleSubmit中调用validateFields()做验证，验证通过后处理业务逻辑，再调用resetFields()清空所有表单字段。
3. 清空表单的时机：除了提交成功后清空，也可以在模态框关闭时调用resetFields()，确保下次打开弹窗时表单是空白状态。

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