React select onchange doesn't work

Question

I am having problems with select tag implementation in React.js. Here is what I have:

var ProfessorsFilter = React.createClass({
  getInitialState: function(){
    return(
    {
      visibleDepartments: [],
      selectedSchoolId: 1
    }
    )
  },
  selectSchool: function(event){
    console.log("select school");
    alert("select ");
    this.setState({selectedSchoolId: event.target.value});
  },
   render: function () {
     var schoolOptions = this.props.schools.map(function(school, index){
       return (
           <option key={index} value={school.id}>{school.name}</option>
       );
     });
       return(

                 <select onChange={this.selectSchool} value={this.state.selectedSchoolId} className="select-2">
                   {schoolOptions}
                 </select>

       )
   }
});

So, I am doing controlled component. But onchange does not fire my method selectSchool. EDIT: jsfiddle: https://jsfiddle.net/wc02bvaj/ BTW. I am also using select2.

EDIT2: It turned out to be problem with select2.

Answer 1

If you're using jQuery along with React on the same DOM elements it will generally cause problems. Either leave that unmanaged by React, use a React equivalent and remove jQuery, or in this case, you have a few options.

The easiest options is to just use https://github.com/rkit/react-select2-wrapper.

Alternatively you could roll your own solution, e.g., Select2 has an change callback on its own. If you're using Redux (it doesn't look like you are) you could change the state by dispatching an action from the Select2 change handler. You might be able to listen to the jQuery Select2 change event by registering a handler in your ProfessorsFilter and setting the state there.