onChange funktioniert nicht mit reagieren und select2

Question

Ich benutze jquery select2, um eine Auswahlbox zu machen. (Auch neu zu reagieren) Ich möchte eine Funktion aufrufen, wenn die Daten in der Mehrfachauswahlbox geändert werden. onClick und onBlur funktionieren wie erwartet, aber onChange tut nichts. Ich denke, dass das Problem damit zu tun hat, wie reagieren es macht. Wenn ich den onChange-Effekt hinzufüge, nachdem die Komponente gerendert hat, funktioniert es $('#additional-filters-dropdown').attr('onChange', 'console.log("test")') . OnChange funktioniert auch, wie ich in nativem HTML ohne reagieren möchte. Und onChange funktioniert, wenn das react-Element ein Eingabefeld ist anstelle von select, also habe ich keine Ahnung, warum sie nicht alle gut zusammenspielen.

React Component

var product_selections = React.createClass({ 
    handleChange: function() { 
     console.log("Selction has been changed!"); 
    }, 
    render: function() { 
     return (
      <div className='row'> 
       <br/> 
       <label htmlFor='product-dropdown'> 
        Product 
        <br/> 
        <select className='js-example-basic-multiple js-states form-control' id='product-dropdown' multiple='multiple' onChange={this.handleChange}> 
        </select> 
       </label> 
      </div> 
     ); 
    } 
}); 

Jquery Select2

$('#product-dropdown').select2({ 
    data: [1,2,3,4] 
}); 

app_main.js

var React = require('react'); 
var ReactDOM = require('react-dom'); 
ReactDOM.render(<ProductSelections/>, document.getElementById('product-selection-container')); 

Alles Das kann mich in die richtige Richtung weisen ist hilfreich.

Answer 1

Das onChange-Ereignis wird nicht ausgelöst, wenn der Wert von JavaScript aktualisiert wird. In diesem Fall Select2.

Wenn Sie jQuery mit react verwenden, sollten Sie versuchen, das in der Komponente enthaltene Plugin beizubehalten.

Dann können Sie so etwas wie dies versuchen die componentDidMount Ereignis reagieren mit:

var product_selections = React.createClass({ 
    handleChange: function() { 
     console.log("Selction has been changed!"); 
    }, 

    componentDidMount: function(){ 
     $(this.refs['mySelect']).select2({ 
      change: this.handleChange 
     }); 
    }, 

    render: function() { 
     return (
      <div className='row'> 
       <br/> 
       <label htmlFor='product-dropdown'> 
        Product 
        <br/> 
        <select ref='mySelect' className='form-control' id='product-dropdown' multiple='multiple'> 
        </select> 
       </label> 
      </div> 
     ); 
    } 
}); 

Answer 2

Sorry für so alte Frage veröffentlichen, aber ich kam hier von Google versucht, das gleiche Problem zu lösen. Hier ist ein aktualisiertes Beispiel, das für mich arbeitet:

import React, { Component } from 'react'; 

class EditPhoneNumberContainer extends Component { 

    componentDidMount() { 
     let s = $(".editPhoneLocationSelect"); 
     s.select2({ 
      placeholder: "Select an option", 
      allowClear: true 
     }); 
     s.on("change", this.props.onSelect); 
    } 

    render() { 
     return (
      <div> 
       <div className="ibox-title"> 
        <h5>Edit Phone Number</h5> 
       </div> 
       <div className="ibox-content form-horizontal"> 
        <select className="select2 form-control required editPhoneLocationSelect"> 
         <option></option> 
         <option>Tester</option> 
         <option>Tester</option> 
         <option>Tester</option> 
        </select> 
       </div> 
      </div> 
     ); 
    } 

} 

export default EditPhoneNumberContainer; 

Und dann würden Sie es so machen:

<EditPhoneNumberList onSelect={this.numberSelected.bind(this)} /> 

numberSelected eine Funktion, die das ausgewählte Element behandeln soll.