web-dev-qa-db-ja.com

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

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

その上にドロップダウンをお願いします。

javascripthtmlreactjshtml-datalist
9
Eugen Sunic

私は現在html5 datalistを使用して問題なく反応しています。

ここに実装があります：

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

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

MDNデータリストの例をReactで機能させるには、少し変更が必要です。

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>
4
Charlie 木匠

データリストはReactでは正常に機能しますが、各オプションタグを閉じる必要があります（最後にバックスラッシュを付けます）。

<option value="something" />
1
Olemak