[解決済み】React JSを使ったドロップダウンのOnChangeイベント

質問

var MySelect = React.createClass({
     change: function(){
         return document.querySelector('#lang').value;
     },
     render: function(){
        return(
           <div>
               <select id="lang">
                  <option value="select" onChange={this.change}>Select</option>
                  <option value="Java" onChange={this.change}>Java</option>
                  <option value="C++" onChange={this.change}>C++</option>
               </select>
               <p></p>
               <p value={this.change}></p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

は onChange イベントは動作しません。

解決方法は？

変更イベントのトリガーは <select> 要素ではなく <option> 要素を使用します。しかし、問題はそれだけではありません。定義した方法は change 関数は、コンポーネントの再レンダリングを引き起こしません。まだReactの概念を完全に理解していないようなので、もしかしたら "Reactで考えよう" が役立ちます。

選択された値をステートとして保存し、値が変化したときにステートを更新する必要があります。状態を更新すると、コンポーネントの再レンダリングがトリガーされます。

var MySelect = React.createClass({
     getInitialState: function() {
         return {
             value: 'select'
         }
     },
     change: function(event){
         this.setState({value: event.target.value});
     },
     render: function(){
        return(
           <div>
               <select id="lang" onChange={this.change} value={this.state.value}>
                  <option value="select">Select</option>
                  <option value="Java">Java</option>
                  <option value="C++">C++</option>
               </select>
               <p></p>
               <p>{this.state.value}</p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

また、以下のことに注意してください。 <p> 要素には value 属性があります。React/JSXは、よく知られたHTML構文を単に複製するだけで、カスタム属性を導入することはありません（ただし key と ref ). もし、選択した値を <p> 要素の中に入れるだけで、他の静的コンテンツと同じようになります。

イベント処理、ステート、フォームコントロールの詳細については、こちらをご覧ください。

• http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
• http://facebook.github.io/react/docs/forms.html