javascript - onChange 不适用于 React 和 select2

Question

我正在使用 jquery select2 来制作选择框。 (也是新的 react )我想在多个选择框中的数据发生更改时调用一个函数。 onClick 和 onBlur 按预期工作，但 onChange 不执行任何操作。我认为这个问题与 react 如何呈现它有关。如果我在组件呈现后添加 onChange 效果，则它可以工作 $('#additional-filters-dropdown').attr('onChange', 'console.log("test")')
.onChange 也可以在原生 html 中按照我想要的方式工作，而无需使用react。如果 react 元素是输入字段而不是选择，则 onChange 可以工作，所以我不知道为什么它们不能很好地协同工作。

react 组件

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

任何可以为我指明正确方向的东西都是有帮助的。

Answer 1

很抱歉发布这样一个老问题，但我从 Google 来到这里试图解决同样的问题。这是一个对我有用的更新示例:

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;

然后你会像这样渲染它:

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

numberSelected 是一个应该处理所选项目的函数。