检测用户是否在datalist中选择或键入新值

Posted 2021-04-30

我坚持要检测用户是否选择或输入新值。

这里我有单独的datalist组件：

 //DataList component

  adresses=[
  {
    "id": 1,
    "address": "address 1",
  },
  {
    "id": 2,
    "address": "address 2",
  },
  {
    "id": 3,
    "address": "address 3",
  },
  {
    "id": 4,
    "address": "address 4",
  }
]


<input
  type="text"
  list="data-list"
  className={classname}
  onChange={onchange}
  placeholder={placeholder}
/>
<datalist id="data-list">
  {adresses.map((item, idx) => {
    const { id, address } = item
    return <option key={idx} data-value={id} value={address} />
})}
</datalist>

比我正在调用该组件并将道具传递给它：

<DataList
  classname="event_time-inputs datasets"
  onchange={e => this.onChooseAddress(e)}
  adresses={this.state.adresses}
  placeholder={"Type or select address"}
/>

OnChange功能：

 onChooseAddress(e) {
    console.log(e.target.value)
  }

如果用户从选项中选择，我需要以某种方式从选项中传递“数据值”。我有新的反应，请理解我的愚蠢问题。

答案

或者最终你可以尝试分配onKeyPress事件来跟踪你的datalist中的变化，并将事件分配给datalist来调用你的函数onChooseAddress(id)。

另一答案

你可以使用onClick on Component。并将idx作为参数传递并稍后使用

return <option key={idx} data-value={id} value={address} onClick={() =>{this.onChooseAddress(idx)}} />

 onChooseAddress(i) {
   console.log(adresses[i].id)
   console.log(adresses[i].address)
  }