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

Answer 1

更改事件在<select>元素上触发，而不是在<option>元素上触发。 但是，这不是唯一的问题。 您定义change函数的方式不会导致组件重新显示。 好像你可能还没有完全掌握React的概念，所以也许“React Thinking in 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

Answer 2

备用

 // adheres to airbnb syntax import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class Select extends Component { constructor(props) { super(props); this.state = { value: '?', options: [ { name: 'Select…', value: null, }, { name: 'A', value: 'a', }, { name: 'B', value: 'b', }, { name: 'C', value: 'c', }, ], }; } render() { const createItem = (item, key) => <option key={key} value={item.value} > {item.name} </option>; return ( <div> <select onChange={event => this.setState({ value: event.target.value })} value={this.state.value} > {this.state.options.map(createItem)} </select> <h1>Favorite letter: {this.state.value}</h1> </div> ); } } ReactDOM.render(<Select />, document.body);