在antd中如何手动更新自定义组件绑定的Form.Item值

这个需求在antd Form中完全可以实现，有两种常用的实现方式，适配不同的业务场景：

方案一：利用Form.Item自动注入能力（推荐） #

antd Form的Form.Item设置name属性后，会自动向内部子组件注入两个props：

• value：当前表单字段的绑定值
• onChange：字段值变化时需要触发的回调

你只需要将自定义组件的返回值逻辑和这两个props对接即可，无需额外维护本地state，也能直接复用antd Form自带的校验、取值、重置等能力。
示例代码如下：

import { Form } from "antd";
import { FC, ReactElement } from "react";

// 自定义组件适配Form自动注入的props
const Child: FC<{
  value?: string;
  onChange?: (value: string) => void;
}> = ({ value, onChange }): ReactElement => {
  return <input value={value} onChange={(e) => onChange?.(e.currentTarget.value)} />;
};

export default function App() {
  const { useForm } = Form;
  const [form] = useForm();

  // 提交时直接获取全量表单值
  const handleSubmit = () => {
    const allValues = form.getFieldsValue();
    console.log(allValues);
  };

  return (
    <div className="App">
      <Form form={form} onFinish={handleSubmit}>
        <Form.Item
          name="customField" // 字段唯一标识，必填
          rules={[{ required: true, message: '该字段为必填项' }]} // 直接配置校验规则
        >
          <Child />
        </Form.Item>
        <button type="submit">提交表单</button>
      </Form>
    </div>
  );
}

方案二：手动调用表单实例更新值（适配无需修改自定义组件的场景） #

如果你的自定义组件已经完成封装，不想调整原有props结构，可以保持现有的returnValue取值逻辑，拿到值后调用Form实例的setFieldsValue方法手动更新表单字段值即可。
示例代码如下：

import { Form } from "antd";
import { FC, ReactElement } from "react";

// 不需要修改原有自定义组件的逻辑
const Child: FC<{
  returnValue: (value: any) => void;
}> = ({ returnValue }): ReactElement => {
  return <input onChange={(e) => returnValue(e.currentTarget.value)} />;
};

export default function App() {
  const { useForm } = Form;
  const [form] = useForm();

  const handleValueChange = (newVal: string) => {
    // 手动更新表单对应字段的值
    form.setFieldsValue({
      customField: newVal
    });
    // 如需更新后立刻触发校验，可调用下方方法
    // form.validateFields(['customField']).catch(err => console.log('校验失败', err))
  };

  const handleSubmit = () => {
    const allValues = form.getFieldsValue();
    console.log(allValues);
  };

  return (
    <div className="App">
      <Form form={form} onFinish={handleSubmit}>
        <Form.Item
          name="customField" // 字段唯一标识，必填
          rules={[{ required: true, message: '该字段为必填项' }]}
        >
          <Child returnValue={handleValueChange} />
        </Form.Item>
        <button type="submit">提交表单</button>
      </Form>
    </div>
  );
}

注意事项 #

• 两种方案都需要给Form.Item设置唯一的name属性，作为字段的唯一标识，校验、取值、更新逻辑都依赖该属性。
• 手动更新字段值后如果需要触发全量校验，直接调用form.validateFields()即可。

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