如何在 Ant Design 中获取所选 Select 组件的 id答案

【问题标题】：How to get id of selected Select component in Ant Design如何在 Ant Design 中获取所选 Select 组件的 id
【发布时间】：2020-10-28 08:27:51
【问题描述】：

我想在Ant设计中获取Select组件的选中id，当前时间，Ant Design的Select返回选中值是Options的值，我可以设置value={item.id}但是当Select组件被选中时，会显示id ，而不是所选选项的名称，因此我必须设置 value={item.name} 并且 onChange 处理程序将采用 item.id。我该怎么做？

这是我的示例Codesanbox

更新：我意识到在我的实际项目中，我返回带有条件的选项，如果我删除条件，它会返回选定的 id 并显示选定的名称，这正是我想要的，我的代码有什么问题？

  const userOptions = user.map((item, index) => {
    if (!existedUser.some((current) => current.id === item.id)) {
      return (
        <Option key={index} value={item.id}>{item.name}</Option>
      );
    }
  });

【问题讨论】：

标签： reactjs antd

【解决方案1】：

将您的 value 属性更改为 item.id 但将 item.name 保留为标签

<Option key={item.id} value={item.id} >
        {item.name}
</Option>

【讨论】：

在我的应用程序中，我设置了value={item.id}，标签为{item.name}，但选择后，Select 将显示选定的ID，而不是标签
不，我只需要选择的 ID，我的代码有什么问题？它是返回 id，但显示 id 而不是 name

【解决方案2】：

如果您将options 传递给<Select />，您可以将选项传递为{label: item.name, value: item.id}，请记住，更改函数现在将收到{label: ..., value: ...}，因此如果您想要ID，您必须获得访问.value。

【讨论】：

我仍然不知道如何将选项传递为{label: item.name, value: item.id}
您可以像这样直接将选项传递给选择组件：<Select options={[{label: 'option 1', value: 1}, {label: 'option 2', value: 2}]}
使用您的数据，您可以执行以下操作：<Select options={user.map(e => ({label: e.name, value: e.id})) /> 根据 ant 的说法，这具有更好的性能。

【解决方案3】：

我在codesanbox中浏览了你的代码并修改如下，

function onChange(value) {
    console.log(`selected ${array.filter(data => data.id === value)[0].name}`);
}

希望对你有帮助！

【讨论】：