React 与 Ant Design 4.5.4 Modal 表单验证实战

React 与 Ant Design 4.5.4 Modal 表单验证实战

在实际业务开发中，弹窗（Modal）往往承载着数据录入或确认的任务。如果缺乏有效的表单验证，不仅用户体验糟糕，后端接口也可能收到脏数据。Ant Design 的 Form 组件配合 Modal 使用非常成熟，但如何优雅地处理验证逻辑、状态重置以及异步提交，是许多开发者容易踩坑的地方。

本文以 React 类组件为例，演示如何在 Ant Design 4.5.4 版本下，实现一个包含基础校验规则的 Modal 表单，并处理提交后的反馈流程。

核心思路

1. 引用控制：通过 React.createRef() 获取 Form 实例，这是调用 validateFields 的关键。
2. 验证逻辑：在点击确定按钮时触发验证，利用 Promise 处理成功与失败分支。
3. 状态管理：确保关闭弹窗时清空表单数据，避免残留信息影响下一次操作。

代码实现

以下是一个完整的示例，涵盖了输入框、下拉选择及复选框等常见控件的集成。

import React from 'react';
import { Modal, Form, Input, Button, Select, Checkbox } from 'antd';
const { Option } = Select;
const { TextArea } = Input;

// 布局配置，方便统一调整
const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

export default class ModalForm extends React.Component {
  state = {
    visible: false,
  };

  // 创建表单引用
  formRef = React.createRef();

  showModal =  {
    .({ :  });
  };

  handleOk =  (e) => {
    e.();
     {
      
       values =  ...();
      .(, values);
      
      
      ...();
      .({ :  });
    }  (info) {
      .(, info);
    }
  };

  handleCancel =  {
    
    ...();
    .({ :  });
  };

  handleAfterClose =  {
    .();
  };

  () {
     (
      
    );
  }
}