Javascript ReactJS下拉菜单（使用语义UI）赢得'；一次换一次火？

在过去的几个小时里，我一直在努力使用ReactJS和语义用户界面，让一个简单的下拉更改事件正常工作。根据我的理解，元素的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>
         );
     }
 });

var DictionarySelector=React.createClass({
getInitialState:函数（）{
返回{值：“”
},
handleChange:函数（e）{
this.setState（{value:e.target.value}）；
console.log（'Dropdown changed'）；
返回；
},
render:function（）{
返回(
选择字典
字典1
字典2
);
}
});

一切似乎都很好，我对此做了一系列研究，但当下拉菜单中的选项发生变化时，什么都没有发生。handleChange函数从未被调用。有人有什么建议吗？
谢谢

这是一个有效的方法

HTML

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'));

var DictionarySelector=React.createClass({
getInitialState:函数（）{
返回{值：“”
},
handleChange:函数（e）{
this.setState（{value:e.target.value}）；
console.log（'Dropdown changed'）；
返回；
},
render:function（）{
返回(
选择字典
字典1
字典2
);
}
}); 
React.render（，document.getElementById（'container'）；

这是一个有效的方法

HTML

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'));

var DictionarySelector=React.createClass({
getInitialState:函数（）{
返回{值：“”
},
handleChange:函数（e）{
this.setState（{value:e.target.value}）；
console.log（'Dropdown changed'）；
返回；
},
render:function（）{
返回(
选择字典
字典1
字典2
);
}
}); 
React.render（，document.getElementById（'container'）；

sooo经过大量的实验和不同的尝试，我发现一切都设置得非常完美，但我一直在用JQuery命令初始化语义UI下拉列表，这导致了一些问题

sooo经过大量的实验和不同的尝试，我发现一切都设置得非常完美，但我一直在用JQuery命令初始化语义UI下拉列表，这导致了一些问题

我不认为这是原因，但是你的样式属性缺少大括号：

style=“marginTop:'55px'}>

我不认为这是原因，但是你的样式属性缺少大括号：

style=“marginTop:'55px'}>

我和你一样有类似的问题，你把代码放在哪里了？因为我尝试在componentDidMount内部，直接在application.js内部（我使用rails），但这不起作用。你是如何在@jkatz94中做到这一点的？我想我最终做的是使用一个标准的下拉列表（不是用语义UI初始化），然后触发标准的onchange事件。Semantic和react不能很好地相互配合，除非您使用react Semantic uiI之类的库。我和您有类似的问题，您将代码初始化语义下拉列表放在哪里？因为我尝试在componentDidMount内部，直接在application.js内部（我使用rails），但这不起作用。你是如何在@jkatz94中做到这一点的？我想我最终做的是使用一个标准的下拉列表（不是用语义UI初始化），然后触发标准的onchange事件。语义和react不能很好地相互配合，除非您使用诸如react语义ui之类的库