簡體   English   中英

ReactJS下拉菜單(使用Semantic UI)不會觸發onChange事件?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM