Ant Design中无form实例时如何设置Form.Item的字段值

方案1：使用内置Hook获取Form实例（适用绝大多数场景） #

只要你的自定义组件是在<Form>标签的渲染范围内，直接调用AntD提供的Form.useFormInstance()即可拿到当前上下文的Form实例，不需要提前通过Form.useForm()声明再逐层透传。
修改后的代码示例：

import { Form, Select, Input, DateInput } from 'antd';
import { useState } from 'react';

// 你的自定义Form Item组件内部
const CustomFormItem = (rest) => {
  const [termType, setTermType] = useState('date');
  // 直接获取当前Form上下文的实例
  const form = Form.useFormInstance();

  const selectBefore = (
    <Select
      value={termType}
      onChange={value => {
        // 直接更新Form对应字段值
        form.setFieldValue('term-type', value);
        // 同步本地状态切换输入组件类型
        setTermType(value);
      }}
    >
      <Select.Option value="date">Date</Select.Option>
      <Select.Option value="number">Number</Select.Option>
    </Select>
  );

  const InputType = termType === 'date' ? DateInput : Input;

  return (
    <>
      <InputType
        addonBefore={selectBefore}
        {...rest}
      />

      <Form.Item
        name='term-type'
        initialValue={termType}
        style={{display: 'none'}}
      >
        {/* 无需手动绑定value，Form.Item会自动关联Form store的值 */}
        <Input type="text" />
      </Form.Item>
    </>
  );
}

方案2：无Form上下文场景的处理 #

如果你的自定义组件完全脱离Form上下文，无法拿到Form实例，可以将状态上提到父组件：

• 自定义组件内部暴露onTermTypeChange回调属性，切换选项时触发回调并回传新值
• 父层调用组件时传入回调，在回调中使用父层持有的Form实例执行setFieldValue('term-type', value)即可

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