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

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

來源

2017-07-18 eugene_sunic

哪裏是你的'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>

來源

2017-08-07 16:39:45

這需要一點點的變化，使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>

來源

2017-11-09 06:20:35

React.js是否支持HTML5數據列表？

回答

相關問題