Antd Form中如何实现Select变更时自动填充Input字段值

带name属性的 Antd Form.Item 会自动接管内部表单项的value绑定、值收集逻辑，你手动给Input传的value={type}会被Form注入的内部状态值覆盖，优先级比Form自身的托管状态低，所以外部useState的变化根本没法传到Input上，自然不会同步更新。
没有Form包裹的时候不存在这套接管逻辑，手动绑定value的写法当然能正常跑。

这是官方推荐的表单联动写法，不需要额外维护重复的state，从根源避免多数据源不一致的问题：直接通过Form实例提供的setFieldsValue方法更新字段值，Form托管的所有绑定字段都会自动同步渲染。
完整实现代码：

const Demo = () => {
  // 初始化Form实例
  const [form] = Form.useForm();

  const onSubmit = (values) => {
    console.log('表单提交结果：', values);
  };

  return (
    <Form form={form} onFinish={onSubmit}>
      <Form.Item name="floorType">
        <Select
          style={{ width: 120 }}
          onChange={(value) => {
            // Select值变更时，同步更新Form中Input对应字段的值
            form.setFieldsValue({
              floorName: value
            })
          }}
        >
          <Option value="fire">Fire</Option>
          <Option value="water">Water</Option>
          <Option value="wind">Wind</Option>
        </Select>
      </Form.Item>

      <Form.Item name="floorName">
        <Input
          style={{ width: 120 }}
          placeholder="Enter Type"
          {/* 无需手动传value，Form.Item会自动绑定托管的floorName值 */}
        />
      </Form.Item>

      <Form.Item>
        <Button
          type="primary"
          htmlType="submit"
          style={{ width: 120 }}
        >
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

• 如果除了同步Input值，你还需要拿Select的选中值做其他业务逻辑，也可以保留原来的useState，但要在Select的onChange回调里，既要调用setType更新本地状态，也要同步调用form.setFieldsValue更新Form内的Input字段值，不要只依赖手动给Input传value，传了也会被Form的托管状态覆盖。
• 不要为了让手动绑定的value生效，就删掉Input所在Form.Item的name属性，这种写法会导致Form提交时拿不到Input字段的值，属于拆东墙补西墙。

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