Question

我有一个输入元素和一个建议的数据表。我正在向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。

这是我的输入和datalist元素

<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）

Answer 1

将所选项目作为完整对象传递。不只是名字。仅显示名称。在您的代码中，您只返回名称。但是你可以返回item或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 显示控制台）

Answer 2

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

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

获取datalist中所选项目的ID

2 个答案: