React.js 是否支持 HTML5 数据列表？

Question

我正在尝试以最简单的方式实现 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"/>

所以我想要一个下拉列表。

Answer 1

我目前正在使用 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>

Answer 2

让 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>

Answer 3

数据列表在 React 中工作正常，但您必须关闭每个选项标签（末尾有反斜杠）。

<option value="something" />

Answer 4

我使用 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)}

React.js 是否支持 HTML5 数据列表？

Does React.js support HTML5 datalist?

html

javascript

reactjs

html-datalist