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 的概念，所以也许 "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>的内容然后简单地将元素放入其中，就像处理任何静态内容一样。
了解有关事件处理、状态和表单控件的更多信息:
关于javascript - 使用 React JS 的 OnChange 事件下拉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28868071/