使用React JS进行下拉的OnChange事件

Question

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事件不起作用。

Answer 1

更改事件是在<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属性。反应/
JSX简单地复制了著名的HTML语法，它不引入自定义属性（有例外key和ref）。如果希望所选值成为<p>元素的内容，则只需将其放入其中，就像处理任何静态内容一样。

了解有关事件处理，状态和表单控件的更多信息：

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