javascript - onChange doesn't work with react and select2 - Stack Overflow

admin管理员组

文章数量:1327980

I am using jquery select2 to make a selectbox. (Also new to react) I want to call a function when the data inside the multiple selectbox is changed. onClick and onBlur work as expected but onChange doesn't do anything. I think the issue has to do with how react renders it. If I add on the onChange effect after the ponent has rendered it works $('#additional-filters-dropdown').attr('onChange', 'console.log("test")') .onChange also works how I want in native html without react. And onChange works if the react element is an input field instead of select so I have no idea why they don't all play nice together.

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

Anything that can point me in the right direction is helpful.

I am using jquery select2 to make a selectbox. (Also new to react) I want to call a function when the data inside the multiple selectbox is changed. onClick and onBlur work as expected but onChange doesn't do anything. I think the issue has to do with how react renders it. If I add on the onChange effect after the ponent has rendered it works $('#additional-filters-dropdown').attr('onChange', 'console.log("test")') .onChange also works how I want in native html without react. And onChange works if the react element is an input field instead of select so I have no idea why they don't all play nice together.

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

Anything that can point me in the right direction is helpful.

• javascript
• jquery
• reactjs
• onchange
• jquery-select2

Share Improve this question Follow asked Jul 8, 2016 at 22:54 Justin OlsonJustin Olson 12655 silver badges1313 bronze badges 2

• i believe on change should be given to option instead of select – Nakib Commented Jul 8, 2016 at 23:10
• With select2 there isn't an option element to the multiselect. – Justin Olson Commented Jul 11, 2016 at 20:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Sorry for posting to such an old question, but I came here from Google trying to solve the same problem. Here's an updated example that is working for me:

import React, { Component } from 'react';

class EditPhoneNumberContainer extends Component {

    ponentDidMount() {
        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;

And then you would render it like this:

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

numberSelected is a function that should handle the selected item.

The onChange event is not triggered when the value is updated by javascript. In this case Select2.

When using jQuery with react you should try to keep the plugin set up contained inside the ponent.

Then you can try something like this using the react ponentDidMount event:

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

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

本文标签： javascriptonChange doesn39t work with react and select2Stack Overflow