onChange 不适用于 react 和 select2

Question

我正在使用 jquery select2 来制作一个选择框。 （也是新的反应）当多选框内的数据发生变化时，我想调用一个函数。 onClick 和 onBlur 按预期工作，但 onChange 没有做任何事情。我认为这个问题与反应如何呈现它有关。如果我在组件渲染后添加 onChange 效果，它可以工作$('#additional-filters-dropdown').attr('onChange', 'console.log("test")') .onChange 也可以在本机 html 中按我想要的方式工作，而无需做出反应。如果反应元素是输入字段而不是选择，则 onChange 有效，所以我不知道为什么它们不能一起玩得很好。

反应组件

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

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

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 是一个应该处理所选项目的函数。

Answer 2

通过javascript更新值时不会触发onChange事件。在这种情况下选择 2。

在使用带有 react 的 jQuery 时，您应该尝试将插件设置包含在组件内。

然后你可以使用 react componentDidMount 事件尝试这样的事情：

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