React Select onchangeが機能しません

Question

React.jsのselectタグの実装に問題があります。ここ は、私が持っているものです。

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> 
 

 
     ) 
 
    } 
 
});

だから、私は制御コンポーネントをしています。しかし、onchangeは私のメソッドselectSchoolを起動しません。 EDIT： jsfiddle：https://jsfiddle.net/wc02bvaj/ BTW。私もselect2を使用しています。

EDIT2：select2で問題があることが判明しました。

Answer 1

と同じDOMエレメントのでReQuestを使用している場合は、一般的に問題が発生します。 Reactによって管理されていないものを残すか、同等のものを使用してjQueryを削除するか、この場合はいくつかのオプションがあります。

最も簡単なオプションは、https://github.com/rkit/react-select2-wrapperを使用することです。

または、 のように独自のソリューションをロールオーバーすることもできます。Select2には独自の変更コールバックがあります。 Reduxを使用している場合（あなたのようには見えません）、Select2変更ハンドラからアクションをディスパッチして状態を変更できます。 ProfessorsFilterにハンドラを登録し、その状態を設定することで、jQuery Select2変更イベントを聞くことができます。