var MySelect = React.createClass({ change: function(){ return document.querySelector(‘#lang’).value; }, render: function(){ return(
React.render(<MySelect />, document.body);
该onChange事件不起作用。
onChange
change 事件是在<select>元素上触发的,而不是在<option>元素上触发的。然而,这不是唯一的问题。您定义change函数的方式不会导致组件的重新呈现
<select>
<option>
change
您必须将所选值存储为状态并在值更改时更新状态。更新状态将触发组件的重新渲染。
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 语法,它没有引入自定义属性(keyand除外ref)。如果您希望所选值成为<p>元素的内容,那么只需将其放入其中,就像您对任何静态内容所做的那样。
<p>
value
key
ref