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

我不确定我是否理解您所遇到的问题，但是对于此类任务，我强烈建议您使用名为{{3}的具有{@ 3 }}。

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

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

Answer 2

我遇到了同样的问题，我希望<datalist>像<select>一样工作。我找不到可接受的解决方案，但是这个简单的轻巧包装节省了我的时间！ React HTML Datalist

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

2 个答案: