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

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

Здесь у меня есть отдельный компонент 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)
  }

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


reactjs javascript html-datalist
person Yerlan Yeszhanov    schedule 29.04.2019    source источник
comment
Я думаю, проблема связана с событием onChange, потому что событие onChange должно быть связано со значением   -  person Thanveer Shah    schedule 29.04.2019

Ответы (2)


arrow_upward
0
arrow_downward

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

person Martin Spd    schedule 29.04.2019

arrow_upward
0
arrow_downward

вы можете использовать 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)
  }
person Mohit Karkar    schedule 29.04.2019
comment
Я думаю, вы не можете добавить к опциям какие-либо прослушиватели событий - person Yerlan Yeszhanov; 29.04.2019