使用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
事件不起作用。
回答:
更改事件是在<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
以上是 使用React JS进行下拉的OnChange事件 的全部内容, 来源链接: utcz.com/qa/417062.html