Unterstützt React.js HTML5-Dataliste?

Question

Ich versuche, HTML5-Datenelement auf die einfachste Weise zu implementieren.

Etwas wie folgt aus:

<input list="browsers"> 

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

Dies gilt jedoch nicht funktionieren. Was wäre mein nächster Schritt, ohne weitere Sachen installieren zu müssen.

Grundsätzlich verwende ich die Ebene Eingang reagieren Element und möchte den Datenlogger einbetten. Hier

ist mein Code reagieren:

<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 würde Ich mag ein Drop-Down obendrein.

Answer 1

Ich benutze derzeit die HTML5-Daten in reagieren ohne Probleme.

Ich habe es wie folgt umgesetzt:

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

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

Answer 2

Es dauert ein wenig Veränderung MDN Datalist Beispiel arbeitet in machen 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>