javascript - ReactJS 下拉菜单(使用语义 UI)不会触发 onChange 事件？

Question

在过去的几个小时里，我一直在努力尝试使用 ReactJS 和语义 UI 让一个简单的下拉更改事件起作用。根据我的理解，元素的 onChange 属性应该在选择不同选项时触发它绑定(bind)到的事件处理程序。这是我的代码:

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 函数。有人有什么建议吗？
谢谢!

Answer 1

这是一个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'));