javascript - 获取数据列表中所选项目的 ID

Question

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

[
    {
        "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"
    }
]

我想知道数据列表中所选选项的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>

将现有_faces 视为我上面显示的数组。如何获取所选选项的 id。 (上面数组中的每个对象都有一个id)

Answer 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 显示控制台)