![](/img/trans.png)
[英]ReactJS Semantic UI dropdown onChange won't fire if the user selects the same item twice
[英]ReactJS dropdown menu (using Semantic UI) won't fire onChange event?
在过去的几个小时里,我一直在努力尝试使用ReactJS和Semantic UI来实现简单的下拉更改事件。 根据我的理解,当选择了不同的选项时,元素的onChange属性应该触发它绑定的事件处理程序。 这是我的代码:
var DictionarySelector = React.createClass({
getInitialState: function() {
return {value: ""}
},
handleChange: function(e) {
this.setState({value: e.target.value});
console.log('Dropdown changed');
return;
},
render: function() {
return (
<div className="ui form" style={{marginTop:'55px'}}>
<div className="field">
<select className="ui dropdown" onChange={this.handleChange} value={this.state.value}>
<option value="">Select Dictionary</option>
<option value="1">Dictionary 1</option>
<option value="2">Dictionary 2</option>
</select>
</div>
</div>
);
}
});
一切似乎都没问题,我对此做了大量研究,但在下拉列表中更改选项时没有任何反应。 永远不会调用handleChange函数。 有没有人有什么建议?
谢谢!
这是一个正在运行的JSFiddle 。
HTML
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
JavaScript的
var DictionarySelector = React.createClass({
getInitialState: function() {
return {value: ""}
},
handleChange: function(e) {
this.setState({value: e.target.value});
console.log('Dropdown changed');
return;
},
render: function() {
return (
<div className="ui form" style={{marginTop:'55px'}}>
<div className="field">
<select className="ui dropdown" onChange={this.handleChange} value={this.state.value}>
<option value="">Select Dictionary</option>
<option value="1">Dictionary 1</option>
<option value="2">Dictionary 2</option>
</select>
</div>
</div>
);
}
});
React.render(<DictionarySelector />, document.getElementById('container'));
Soooo经过大量的实验和不同的尝试后,我发现一切都设置得很完美,但我一直在用其他地方的JQuery命令初始化语义UI下拉列表,这导致了一些问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.