如何修改Ant Design中包裹在Form.Item内的Select选择器的值

Ant Design Form 组件会默认接管所有设置了name属性的Form.Item内部表单项的状态，优先级高于用户自行声明的useState状态。你自己修改外部value状态时，Form 内部维护的对应表单项状态没有同步更新，所以 Select 不会响应状态变化。删除Form.Item后脱离了 Form 的状态管控，你自己的useState逻辑就会正常生效。

另外你现有代码存在一个语法问题：Button的onClick事件直接绑定了setValue('pp')，会在组件渲染时立即执行赋值逻辑而非点击时触发，需要改成箭头函数包装。

分两种适用场景：

方案1：使用Form内置状态管理（推荐，适合常规表单场景） #

不需要自行声明useState维护表单项值，直接通过 Form 实例操作表单状态：
第一步，创建 Form 实例：

import { useForm, Form, Select, Button } from 'antd';

// 组件内部声明
const [form] = useForm();

第二步，绑定 Form 实例并修改触发逻辑：

<Form form={form}>
  <Form.Item 
    name="value" 
    rules={[{ required: true, message: 'Veuillez choisir une valeur !' }]}
    label="Type"
  >
    <Select>
      <Select.Option value="pp">Personne physique</Select.Option>
      <Select.Option value="mp">Personne morale</Select.Option>
    </Select>
  </Form.Item>

  <Button type="primary" onClick={() => form.setFieldValue('value', 'pp')}>Click me</Button>
</Form>

后续要获取表单值可以调用form.getFieldValue('value')，或者在form.validateFields()提交时自动获取所有表单项值。

方案2：自行维护状态（适合需要单独管控表单项的特殊场景） #

删掉Form.Item的name属性，Form 就不会接管该表单项的状态，修正事件绑定写法即可正常运行：

const [value, setValue] = useState(null);

// 组件内容
<Form.Item 
  rules={[{ required: true, message: 'Veuillez choisir une valeur !' }]}
  label="Type"
>
  <Select value={value} onChange={e => setValue(e)}>
    <Select.Option value="pp">Personne physique</Select.Option>
    <Select.Option value="mp">Personne morale</Select.Option>
  </Select>
</Form.Item>

<Button type="primary" onClick={() => setValue('pp')}>Click me</Button>

使用该方案提交表单时，需要自行把value值整合到提交参数中。

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