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

Question

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

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

如何改为显示标签并保持选择的值作为选项值？

这是一个链接，显示了沙箱中的问题

传递选项数组的另一个链接也无法正常工作

笔记：

它在 Ant v3 中运行良好，如此链接所示

Answer 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

Answer 2

正如我在 Antd 存储库上打开的问题中所指出的，这种行为是在新版本中出现的

然而，最接近我需要的是带有搜索选项的 Antd Select，它完全可以满足我的问题中的需要，无需任何修改