Comment obtenir la valeur sélectionnée d'un menu déroulant dans ReactJS

J'utilise react et je veux obtenir la valeur de l'option sélectionnée d'une liste déroulante dans react mais je ne sais pas comment. Toutes les suggestions? Merci! Ma liste déroulante est juste une sélection comme: 

            <select id = "dropdown">
                <option value="N/A">N/A</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
Author: BlueElixir, 2015-03-17
Source

3 answers

Le code de la méthode render représente le composant à un moment donné. Si vous faites quelque chose comme ça, l'utilisateur ne pourra pas faire de sélections en utilisant le contrôle de formulaire: 

<select value="Radish">
  <option value="Orange">Orange</option>
  <option value="Radish">Radish</option>
  <option value="Cherry">Cherry</option>
</select>

Il existe donc deux solutions pour travailler avec des contrôles de formulaires:

  1. Composants contrôlés Utilisez le composant state pour refléter les sélections de l'utilisateur. Cela fournit le plus de contrôle, car toutes les modifications que vous apportez à {[4] } seront reflétées dans le rendu du composant:

Exemple:

var FruitSelector = React.createClass({
    getInitialState:function(){
      return {selectValue:'Radish'};
  },
    handleChange:function(e){
    this.setState({selectValue:e.target.value});
  },
  render: function() {
    var message='You selected '+this.state.selectValue;
    return (
      <div>
      <select 
        value={this.state.selectValue} 
        onChange={this.handleChange} 
      >
       <option value="Orange">Orange</option>
        <option value="Radish">Radish</option>
        <option value="Cherry">Cherry</option>
      </select>
      <p>{message}</p>
      </div>        
    );
  }
});

React.render(<FruitSelector name="World" />, document.body);

JSFiddle: http://jsfiddle.net/xe5ypghv/

  1. Composants incontrôlés L'autre option consiste à ne pas contrôler la valeur et à simplement répondre aux événements onChange. Dans ce cas, vous pouvez utiliser l'accessoire defaultValue pour définir une valeur initiale.

    <div>
 <select defaultValue={this.state.selectValue} 
 onChange={this.handleChange} 
 >
    <option value="Orange">Orange</option>
    <option value="Radish">Radish</option>
    <option value="Cherry">Cherry</option>
  </select>
  <p>{message}</p>
  </div>

Http://jsfiddle.net/kb3gN/10396/

Les documents pour cela sont excellents: http://facebook.github.io/react/docs/forms.html et aussi montrez comment travailler avec plusieurs sélections.

MISE À JOUR

Une variante de l'Option 1 (contrôlé à l'aide d'un composant) est d'utiliser Redux et Réagir-Redux pour créer un composant conteneur. Cela implique connect et une fonction mapStateToProps, ce qui est plus facile qu'il n'y paraît mais probablement exagéré si vous débutez.

 52
Author: Max Heiber, 2016-11-09 15:31:46

Implémentez votre liste déroulante comme 

<select id = "dropdown" ref = {(input)=> this.menu = input}>
    <option value="N/A">N/A</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Maintenant, pour obtenir la valeur d'option sélectionnée du menu déroulant, utilisez simplement: 

let res = this.menu.value;
 12
Author: Shubham Khatri, 2017-09-07 19:50:51

Utilisez simplement OnChange événement de l'objet <select>. La valeur sélectionnée est dans e.target.value alors.

Au fait, c'est une mauvaise pratique d'utiliser id="...". Il est préférable d'utiliser ref=">.." http://facebook.github.io/react/docs/more-about-refs.html

 6
Author: Karén, 2015-03-17 21:10:34