onChange 不适用于 react 和 select2

Question

我正在使用 jquery select2 制作一个 select 盒子。（也是新反应）我想在多个select框中的数据发生变化时调用一个函数。 onClick 和 onBlur 按预期工作，但 onChange 不执行任何操作。我认为这个问题与反应如何呈现它有关。如果我在组件呈现后添加 onChange 效果，它可以工作 $('#additional-filters-dropdown').attr('onChange', 'console.log("test")').onChange 也可以按我想要的方式在本机 html 中工作，而无需做出反应。如果 react 元素是输入字段而不是 select，则 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 选择2

$('#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

javascript更新值时不会触发onChange事件。在本例中选择 2.

将 jQuery 与 React 一起使用时，您应该尝试将插件设置包含在组件中。

然后你可以使用 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>
        );
    }
});

Answer 2

很抱歉发布这么老的问题，但我从 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 是一个应该处理所选项目的函数。

onChange 不适用于 react 和 select2

onChange doesn't work with react and select2

javascript

jquery

onchange

reactjs

select2