React.jsはHTML5データリストをサポートしていますか？

Question

私は可能な限り簡単な方法で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）インストールする必要なしに、私の次のステップは何でしょうか。

基本的に、私は平文入力反応要素を使用していて、データリストを埋め込みたいと考えています。

<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データリストを使用しています。

私はこのようにそれを実装しました：

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

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

Answer 2

それはMDNデータリストの例が反応して動作させるために少し変更を要します。

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>