DT走过的路

一、先说核心：不用 useForm 原生也能做表单，但极其麻烦

原生 React 管控表单思路：

每一个输入框单独绑定 value + onChange，自己声明一堆 state、手写取值、校验、重置、回填。

jsx

// 原生笨写法
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
// 每个Input都要绑onChange

字段一多（十几、几十个表单项）代码爆炸、维护灾难。

Ant Design Form 的 Form.useForm() 就是表单控制器实例，把表单所有逻辑统一托管。

二、useForm 完整作用清单

1. 统一收集所有表单字段值，不用逐个绑定 state

调用 form.validateFields() / form.getFieldsValue() 一次性拿到全部表单数据：

jsx

const [form] = Form.useForm();

const onSubmit = async () => {
  // 一次性获取所有表单值
  const values = await form.validateFields();
  console.log(values.username, values.password);
};

2. 内置表单校验，不用自己写正则判断

在 <Form.Item name="username" rules={[]}> 配置校验规则，提交自动触发校验，错误提示自动渲染：

• 必填、长度限制、手机号、邮箱、自定义校验 校验失败自动标红、展示文案，不用手动写 if 判断。

3. 一键重置、清空表单

jsx

form.resetFields(); // 全部恢复初始值

4. 回填编辑数据（编辑弹窗必备）

编辑打开弹窗时，后端回显数据一行代码赋值：

jsx

form.setFieldsValue(record);

不用挨个给每一个 input 赋值 state。

5. 局部更新单个字段、设置禁用、只读、动态显隐

jsx

// 修改单个字段值
form.setFieldValue('username', 'admin');
// 获取单个字段
form.getFieldValue('password');

6. 表单联动（A 输入框变化，B 自动改变）

不需要复杂监听 useState 变化，依托 form 实例即可做字段联动。

7. 脱离 JSX 组件层级操作表单

form 实例可以提升到父组件、弹窗外部，跨组件控制子表单；

不用靠层层传函数、回调父子通信。

三、经典最简完整示例

jsx

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

export default function Login() {
  // 创建表单控制器实例
  const [form] = Form.useForm();

  // 提交回调，校验通过自动接收表单值
  const onFinish = (values) => {
    console.log('表单数据：', values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true, message: '请输入账号' }]}>
        <Input placeholder="账号" />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
        <Input.Password placeholder="密码" />
      </Form.Item>

      <Button type="primary" htmlType="submit">登录</Button>
      <Button onClick={() => form.resetFields()}>重置</Button>
    </Form>
  );
}

四、补充关键细节

1. const [form] = Form.useForm() 生成独立表单实例
   • 一个页面多个独立表单，调用多次 useForm() 生成多个实例互不干扰；
2. 为什么要把 form 传给 <Form form={form}>？ JSX 里的 Form 组件和外部 form 实例建立双向绑定，实例才能接管内部所有 Form.Item；
3. 受控不再依赖组件自身 state 所有字段状态、校验状态、错误信息都存在 form 实例内部，组件无需批量声明 useState