如何更改表单应答器内的选择输入的值（蚂蚁设计）答案

【问题标题】：How to change value of select input which is inside a form balise (ant design)如何更改表单应答器内的选择输入的值（蚂蚁设计）
【发布时间】：2021-09-16 20:29:09
【问题描述】：

我正在搜索如何在表单应答器中更改我的选择输入的值（使用 ant 设计库）。

 let [value, setValue] = useState(null)


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

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

当我点击时，没有任何反应，值保持旧值。

但如果我删除<Form.Item> 应答器，它可以正常工作。

有什么想法吗？

谢谢

【问题讨论】：

为什么在提交表单时需要那个 ant 设计来管理好。
您可以将您的代码添加到在线编辑器吗？如果你删除<Form.Item>，我不明白setValue(e) 是如何工作的，thnx
@Nokwiw 这是我的例子：codesandbox.io/s/musing-zeh-esxtc?file=/src/App.js
@Kantivekariya 我遵循项目结构，它适用于一切，但不适用于我的情况
@Nokwiw 这是它工作的时候（没有 Form.item）：codesandbox.io/s/cocky-khorana-vynvt?file=/src/App.js:102-106

标签： javascript reactjs antd ant-design-pro

【解决方案1】：

你可以这样做

let [value, setValue] = useState(null)

const handleFormValuesChange = (changedValues) => {
  const formFieldName = Object.keys(changedValues)[0];
  if (formFieldName === "typeCeso") {
    setValue(changedValues[formFieldName]);
  }
};



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

【讨论】：