ReactJS dropdown menu (using Semantic UI) won't fire onChange event?

Question

I've been struggling for the past few hours trying to get a simple dropdown change event to work, using ReactJS and Semantic 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. Here is my code:

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

Everything seems ok, and I did a bunch of research about this, but nothing happens when the option is changed in the dropdown. The handleChange function is never called. Does anyone have any suggestions?
Thanks!

I don't think this is the cause of it, but you're missing open braces on your style attribute: style="marginTop:'55px'}}> — Sean Walsh
– Sean Walsh, Commented Jun 28, 2015 at 23:01

tcigrand · Accepted Answer · 2015-07-01 16:54:11Z

Here is a JSFiddle that is working.

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

jkatz94 · Accepted Answer · 2015-07-06 00:49:29Z

2

Soooo after a ton of experimenting and different attempts i figured out that everything was set up perfectly, but I had been initializing the Semantic UI dropdown with a JQuery command elsewhere which was causing some issues.

answered Jul 6, 2015 at 0:49

jkatz94

1991 gold badge2 silver badges11 bronze badges

3 Comments

Panczo Over a year ago

I have similar problem like you, where did you put code initializing semantic dropdown? Because i try inside componentDidMount and directly inside application.js (i work with rails) but this doesn't work.

anhldbk Over a year ago

How did you do that @jkatz94?

jkatz94 Over a year ago

I think what I ended up doing was using a standard dropdown (not initialized with semantic UI) and then having the standard onchange event fire. Semantic and react don't play well with one another unless you use some library like react-semantic-ui

Collectives™ on Stack Overflow

ReactJS dropdown menu (using Semantic UI) won't fire onChange event?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related