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

问题描述：

我试图以最简单的方式实现HTML5数据列表元素。React.js是否支持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）额外的东西，我的下一步将是什么。

基本上，我使用plain input react元素并且想要嵌入数据列表。

这里是我的反应代码：

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

所以我想最重要的是下拉。

哪里是你的'react'代码??? –

@UkkarshDubey现在包含 –

试试这个 - https://stackoverflow.com/questions/27285856/how-do-i-dynamically-set-html5-data-attributes-using-react –

答

我目前正在使用html5 datalist作出反应没有任何麻烦。

我实现这样的：

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

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

答

这需要一点点的变化，使MDN DataList的例子工程反应。

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>

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

相关推荐