[解決済み] ReactJSでドロップダウンメニューの選択値を取得する方法

質問

reactを使っているのですが、reactでドロップダウンの選択されたオプションの値を取得したいのですが、方法がわかりません。何か提案はありますか？ ありがとうございます 私のドロップダウンは、ちょうどのような選択です。

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

どのように解決するのですか？

のコードは render メソッドは任意の時点のコンポーネントを表します。 もし、あなたが のようなものを のようにした場合、ユーザーはフォームコントロールを使用して選択することができなくなります。

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

つまり、フォームコントロールの操作には2つの解決策があります。

1. 制御されたコンポーネント 使用コンポーネント state を使用して、ユーザーの選択を反映させます。これは最もコントロールしやすい方法です。 state に加えた変更は、コンポーネントのレンダリングに反映されるからです。

の例です。

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. 制御不能なコンポーネント もう一つの選択肢は、値を制御せず、単に onChange イベントに応答することです。この場合は defaultValue プロパティを使用して初期値を設定することができます。

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

これのドキュメントは素晴らしいです。 http://facebook.github.io/react/docs/forms.html で、複数選択を扱う方法も紹介されています。

最新情報

オプション 1 (制御されたコンポーネントを使用) のバリエーションとして Redux と リアクト-リダックス を作成し コンテナ・コンポーネント . これには connect と mapStateToProps という関数があり、これは思ったより簡単ですが、始めたばかりならやりすぎかもしれません。