如何获取datalist选项onclick的属性-react.js

Question

我正在一个reactjs项目中，我正在使用语义ui来模拟自动搜索。 我创建了一个搜索输入，用户可以输入搜索数据并从get请求（本地服务器）获取数据列表。 该列表将动态填充，并且显示结果，请参阅下图。

但是我正在执行的GET请求有一个名为id的额外值，我必须将它与称为key的值（可以在图像上看到的testtask）一起检索。 我怎样才能做到这一点？ 下面是我的代码：

 <div className="logoutautocomplete"> <div> <Input list='languages' placeholder='Enter countrydata' onChange={this.onChangeSearchInput} /> <datalist id='languages' value={this.state.data.country} > {this.state.countryData.map((e, key) => { return <option value={e.Key} data-id={e.Id} >{e.Key}</option>; {/* i am able display the key and get the value . i need the value of e.id to be returened to my onChangeSearchInput */} })} </datalist> </div> </div> 

 onChangeSearchInput(e) { console.log("this value", e.target.value.data); GetData(e.target.value).then(result => { //this.state.data.splice(updateIndex, 1); this.setState({ countryData: result.searchCountry }); // i am setting the array hear console.log("result is", this.state.countryData); }); } 

 // Json data i am adding into countrydata { "searchCountry": [ { "Key": "Testtask", "Id": "2" }, { "Key": "Testtask", "Id": "3" } ] } 

Answer 1

我不确定我是否理解您所遇到的问题，但是对于此类任务，我强烈建议您使用一个名为react-select的库，该库具有您正在寻找的功能，即Async 。

使用“异步”组件从带有“回叫”或“ promise”的远程源中加载选项，您可以将默认值添加到select和更多选项中。

该库的普及确保您拥有干净整洁的代码，并且没有错误，我认为它比尝试从头开始编写要好得多。