ReactJS 下拉菜单（使用语义 UI）不会触发 onChange 事件？答案

【问题标题】：ReactJS dropdown menu (using Semantic UI) won't fire onChange event?ReactJS 下拉菜单（使用语义 UI）不会触发 onChange 事件？
【发布时间】：2015-06-28 22:39:48
【问题描述】：

在过去的几个小时里，我一直在努力尝试使用 ReactJS 和语义 UI 来让一个简单的下拉更改事件起作用。 From my understanding, the onChange property of the element is supposed to fire the event handler it is bound to when a different option is selected.这是我的代码：

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

【问题讨论】：

我不认为这是原因，但您的样式属性缺少左大括号：style="marginTop:'55px'}}>

标签： javascript reactjs semantic-ui

【解决方案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'));

【讨论】：

【解决方案2】：

Soooo 经过大量的试验和不同的尝试后，我发现一切都设置得很完美，但我一直在用其他地方的 JQuery 命令初始化语义 UI 下拉菜单，这导致了一些问题。

【讨论】：

我也有和你类似的问题，你把代码初始化语义下拉列表放在哪里了？因为我在 componentDidMount 内部尝试并直接在 application.js 内部尝试（我使用 rails）但这不起作用。
你是怎么做到的@jkatz94？
我认为我最终做的是使用标准下拉菜单（未使用语义 UI 初始化），然后触发标准 onchange 事件。除非您使用诸如 react-semantic-ui 之类的库，否则语义和反应不能很好地相互配合