React Antd v4 自动完成在选择选项时显示选定的值而不是标签答案

【问题标题】：React Antd v4 autocomplete shows selected value instead of label upon selecting an optionReact Antd v4 自动完成在选择选项时显示选定的值而不是标签
【发布时间】：2020-06-17 05:22:45
【问题描述】：

我正在使用 React Antd v3 并将其升级到 v4，我注意到一个问题，其中自动完成组件已更改，现在它的行为方式很奇怪

传递一个[{value: string, label: 123}]的json数组，一切正常，除了在值选择时，显示值（不是标签）

如何改为显示标签并将所选值保留为选项值？

Here is a link that shows the problem in a sandbox

Another link where passing array of Options also doesn't work correctly

注意：

它在 Ant v3 中运行良好，as shown in this link

【问题讨论】：

标签： reactjs antd

【解决方案1】：

您可以使用key 属性传递唯一ID，并使用value 作为标签。然后，在 onSelect 函数中使用 2 个参数来检索密钥或任何其他属性。

第一个参数用于传递值，和
第二个用于传递选中选项的对象。

示例数据选项：

const dataSource = [
  { key: 1, value: "John Doe"},
  { key: 2, value: "Jane Doe"}
]

示例字段：

<AutoComplete
   options={options}
   onSelect={(val, option) => onSelect(val, option)}
   onSearch={onSearch}
>
   <Input.Search size="large" />
</AutoComplete>

完整代码示例：codesandbox

【讨论】：

【解决方案2】：

根据文档https://ant.design/components/auto-complete/#components-auto-complete-demo-basic

它的目的是在不受控制并传入选项时使用值。如果您希望标签与实际值不同，则必须使用

const { Option } = AutoComplete;

并将 Option 数组传递给 Autocomplete 的 Children

<AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here">
   <Option value="111">Hello</Option>
</AutoComplete>

见https://ant.design/components/auto-complete/#components-auto-complete-demo-options

【讨论】：

【解决方案3】：

正如我在 Antd repo 上打开的in the issue 所示，这种行为是在新版本中设计的

然而，最接近我需要的是 Antd Select with a search 选项，它完全符合我的问题所需要的，没有任何黑客攻击

【讨论】：