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

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"/>

所以我想要一个下拉菜单。

原文由 EugenSunic 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Sebastian K. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 <option value="something" />

原文由 Olemak 发布，翻译遵循 CC BY-SA 4.0 许可协议