javascript - 使用React JS进行下拉的OnChange事件(OnChange event using React JS for drop down)

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

The onChange event does not work.(onChange事件不起作用。)

  ask by user544079 translate from so

Answer 1

The change event is triggered on the <select> element, not the <option> element.(更改事件在<select>元素上触发，而不是在<option>元素上触发。)

However, that's not the only problem.(但是，这不是唯一的问题。) The way you defined the change function won't cause a rerender of the component.(定义change函数的方式不会导致重新呈现组件。) It seems like you might not have fully grasped the concept of React yet, so maybe "Thinking in React" helps.(看起来你可能还没有完全掌握React的概念，所以也许“反思中的思考”会有所帮助。) You have to store the selected value as state and update the state when the value changes.(您必须将所选值存储为状态，并在值更改时更新状态。) Updating the state will trigger a rerender of the component.(更新状态将触发组件的重新呈现。) 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); Also note that <p> elements don't have a value attribute.(另请注意， <p>元素没有value属性。) React/JSX simply replicates the well-known HTML syntax, it doesn't introduce custom attributes (with the exception of key and ref ).(React / JSX简单地复制了众所周知的HTML语法，它没有引入自定义属性（ key和ref除外）。) If you want the selected value to be the content of the <p> element then simply put inside of it, like you would do with any static content.(如果您希望所选值是<p>元素的内容，则只需将其放入其中，就像使用任何静态内容一样。) Learn more about event handling, state and form controls:(详细了解事件处理，状态和表单控件：) http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html(http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html) http://facebook.github.io/react/docs/forms.html(http://facebook.github.io/react/docs/forms.html)