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

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

Answer 2

当javascript更新值时，不会触发onChange事件。在这种情况下，Select2。

当使用jQuery with 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>
        );
    }
});

onChange不能与react和select2

2 个答案: