Поддерживает ли React.js список данных HTML5?

Я пытаюсь реализовать элемент списка данных HTML5 самым простым способом.

Что-то вроде этого:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Однако это не работает. Каким был бы мой следующий шаг без установки (npm) дополнительных вещей.

По сути, я использую простой элемент реакции input и хочу встроить список данных.

Вот мой код реакции:

    <input className={"custom_input inline "+this.isValidInteger(this.props.price.price_first,0,2000000)} 
    style={{marginRight:'5px'}} 
    value={this.props.price.price_first || ''} type="text"
    onChange={(e)=>this.props.dispatch({type:"price", payload:e.target.value})} 
    placeholder=" Unesite..." 
    maxLength="10"/>

Поэтому я хотел бы выпадающий список поверх этого.


reactjs javascript html html-datalist
person Eugen Sunic    schedule 18.07.2017    source источник
comment
Попробуйте это - stackoverflow.com/questions/27285856/   -  person Utkarsh Dubey    schedule 18.07.2017
comment
Поддерживается Dom элементов reactjs - facebook.github.io/react/docs/dom- элементы.html   -  person Utkarsh Dubey    schedule 18.07.2017

Ответы (4)


arrow_upward
28
arrow_downward

В настоящее время я использую список данных html5 в реакции без проблем.

Вот реализация:

<input type="text" list="data" onChange={this._onChange} />

  <datalist id="data">
    {this.state.data.map((item, key) =>
      <option key={key} value={item.displayValue} />
    )}
  </datalist>
person Sebastian K.    schedule 07.08.2017
comment
Как получить событие, когда параметр выбирается из раскрывающегося списка либо с клавиатуры, либо с помощью щелчка? - person CKA; 29.06.2019
comment
Сам список данных не имеет специальных событий для обработки этого. Но вы можете использовать событие oninput элемента ввода. Обратитесь к этому ответу stackoverflow.com/questions/30022728/ - person Sebastian K.; 24.10.2019

arrow_upward
6
arrow_downward

Списки данных отлично работают в React, но вы должны закрыть каждый тег параметра (с обратной косой чертой в конце).

<option value="something" />
person Olemak    schedule 23.07.2019

arrow_upward
4
arrow_downward

Требуется небольшое изменение, чтобы пример списка данных MDN работал в React.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>
    Choose a browser from this list:
    <input list="browsers" name="myBrowser" />  
</label>   
<datalist id="browsers">
    <option value="Chrome" />
    <option value="Firefox" />
    <option value="Internet Explorer" />
    <option value="Opera" />
    <option value="Safari" />
    <option value="Microsoft Edge" />   
</datalist>
person Charlie 木匠    schedule 09.11.2017

arrow_upward
-1
arrow_downward

Это отлично работает со мной, используя хук useRef; использование useState имеет медленную проблему.

<input type="text" ref={item_name_ref} onClick={(e)=>{item_name_ref.current.value=""}}  defaultValue = {props.selectedRecord.item_name} list="item_name_list"/>
<datalist id="item_name_list">
    {  
        productsName.map((item,index)=>{
          return  <option key={uuid()} value={item.item_name} />;
        })
    }
</datalist>

то я могу получить результат в

const handleClick=()=>{ alert(item_name.current.value)}
person Marcial Glori    schedule 24.10.2020