web-dev-qa-db-fra.com

React.js prend-il en charge la liste de données HTML5?

J'essaie d'implémenter l'élément de liste de données HTML5 de la manière la plus simple possible.

Quelque chose comme ça:

<input list="browsers">

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

Cela ne fonctionne cependant pas. Quelle serait ma prochaine étape sans avoir à installer (npm) des trucs supplémentaires.

Fondamentalement, j'utilise l'élément plain input react et je veux intégrer la liste de données.

Voici mon code de réaction:

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

J'aimerais donc une liste déroulante en plus de cela.

javascripthtmlreactjshtml-datalist
9
Eugen Sunic

J'utilise actuellement html5 datalist pour réagir sans problème.

Voici la mise en œuvre:

<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.

Il faut un peu de changement pour que l'exemple de base de données MDN fonctionne dans 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 木匠

Les Datalists fonctionnent bien dans React, mais vous devez fermer chaque balise d'option (avec une barre oblique inverse à la fin).

<option value="something" />
1
Olemak