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

le code dans Le render méthode représente le composant à un moment donné. Si vous n' quelque chose comme ceci, 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 y a Donc deux solutions pour travailler avec les contrôles de formulaires:

1. Composants Contrôlés utiliser la composante state pour refléter les sélections de l'utilisateur. Ceci fournit le plus de contrôle, puisque toutes les modifications que vous faites à state sera reflété dans le composant de rendu:

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/

2. Composants Non Contrôlés L'autre option est de ne pas contrôler la valeur et de simplement répondre à onChange événements. Dans ce cas, vous pouvez utiliser le defaultValue prop pour définir une première valeur.

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

La doc de ce sont grandes: http://facebook.github.io/react/docs/forms.html et aussi montrer comment travailler avec plusieurs sélections.

UPDATE

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