React.js是否支持HTML5 datalist？

Question

我正在尝试以最简单的方式实现HTML5 datalist元素.

像这样的东西:

<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 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 datalist做出反应而没有任何麻烦.

我已经实现了这样:

<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

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

<option value="something" />