React.js是否支持HTML5数据列表? [英] Does React.js support HTML5 datalist?

问题描述

我正在尝试以最简单的方式实现HTML5数据列表元素.

I'm trying to implement HTML5 datalist element in a easiest possible way.

类似这样的东西:

<input list="browsers">

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

但是，这不起作用.无需安装(npm)其他东西，下一步是什么.

This does not work however. What would be my next step without having to install (npm) additional stuff.

基本上，我正在使用普通的 input react元素，并希望嵌入数据列表.

Basically, I'm using the plain input react element and want to embed the datalist.

这是我的反应代码:

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

因此，我想在此下拉菜单.

So I would like a dropdown on top of that.

推荐答案

我目前正在使用 html5数据列表进行响应，而不会出现问题.

I'm currently using the html5 datalist in react without issues.

实现方法如下:

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

  <datalist id="data">
    {this.state.data.map((item, key) =>
      <option key={key} value={item.displayValue} />
    )}
  </datalist>

这篇关于React.js是否支持HTML5数据列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！