определить, выбрал ли пользователь или набрал новое значение в списке данных

Question

Я застрял, чтобы определить, выбрал ли пользователь или набрал новое значение.

Здесь у меня есть отдельный компонент списка данных:

 //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)
  }

если пользователь выбирает из опций, мне нужно как-то передать «значение данных» из опций.Я новичок в реакции, пожалуйста, поймите меня за глупые вопросы.

Answer 1

Или, в конце концов, вы можете попытаться назначить событие onKeyPress для отслеживания изменений в datalist и назначить событие для списка данных для вызова вашей функции onChooseAddress(id).

Answer 2

Вы можете использовать onClick на Компонент. и передайте 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)
  }