获取数据列表中所选项目的ID答案

【问题标题】：Get Id of selected item in datalist获取数据列表中所选项目的ID
【发布时间】：2018-04-18 10:06:13
【问题描述】：

我有一个输入元素和一个数据列表来提供建议。我正在将一组对象提供给 datalist 以获取如下所示的建议

[
    {
        "id": "9cb98eab-7cd4-47d0-8b30-5512a826a3c0",
        "type": "Person",
        "name": "Shahrukh Khan"
    },
    {
        "id": "8133586f-ef81-4200-96e8-aff71858ade4",
        "type": "Person",
        "name": "B. Jayashree"
    },
    {
        "id": "f9d186d9-5fb9-484b-93c7-274d0ca75eb7",
        "type": "Person",
        "name": "B. Jayashree"
    },
    {
        "id": "b39279f5-e7d4-4013-a785-ce88013d9a76",
        "type": "Person",
        "name": "E T Mohammed Basheer"
    },
    {
        "id": "8ea077b0-609e-45c6-a839-7735a87557d7",
        "type": "Person",
        "name": "E. T. Mohammed Basheer"
    }
]

我想知道 datalist 的选定选项的 id。我知道如何获取值（通过输入元素的值）。但我不想要所选项目的价值，我想要 id。

这是我的输入和数据列表元素

<div>
    <Input className="add-tag-name-input" id="name-field" list='languages' onChange={this.onNameValueChanged.bind(this)}/>
    <datalist id='languages'>
        {this.state.existing_faces && this.state.existing_faces.map((item,i)=>{
            return <option value= {item.name} />
        })}
    </datalist>
</div>

将 existing_faces 视为我在上面显示的数组。如何获取所选选项的 ID。（上面数组中的每个对象都有一个id）

【问题讨论】：

标签： javascript reactjs html-datalist

【解决方案1】：

将所选项目作为完整对象传递。不仅仅是名字。只显示名称。在您的代码中，您只返回名称。但您可以退回商品或 item.id。值应该是项目。您仍然可以显示项目的名称。但是传递了对象进行处理。

点赞（伪代码）：

<option value=item>{item.name}</option>

或者只有id：

<option value={item.id}>{item.name}</option>

也许您必须进行一些调整以符合您的代码。但主要信息是，您可以设置标签值并将项目作为对象作为选项值传递。

<option value={what-ever-you-want}>{what-the-user-will-see}</option>

工作原生 HTML 示例：

<select onchange="console.log(this.value)">
  <option value="id-1">Name 1</option>
  <option value="id-2">Name 2</option>
  <option value="id-3">Name 3</option>
  <option value="id-4">Name 4</option>
</select>

将在浏览器的控制台中打印所选项目的 id。（按 F12 或 Ctrl + Shift + i 显示控制台）

【讨论】：

我该怎么做
@ApurvG 我认为他的意思是<option value= {item} />
这行不通。因为 value={item} 不会将名称显示为建议。它会将项目对象显示为建议。
那么我将如何在任何功能中获取 ID？如何通过它
当然可以显示名字。请参阅我的代码 sn-p 示例。在降低我的答案之前。 -.-

【解决方案2】：

您可以将数组中的 id 作为值放入 JSX。

<option value= {item.name} data-id={item.id} />

【讨论】：

然后呢？如何在任何函数中获取它
好问题。您可以按照 Dominik 的建议将 id 放入值中，但这并不可取，因为它向用户显示。否则我无法使用 react 将其从 event.target 中取出。