ReactJS: Calling 'this' within a JQuery event listener function

Question

I am trying to refer to this (i.e. the ReactJS component) within a JQuery event callback:

var Component = React.createClass({
    func1: function(){
        $("#multi").multiselect({
            onChange: function(a, b){
                this.test();
            },
        });
    },
    test: function(){
         console.log("Calling a react component function");
    }
    ...
});

However it says:

TypeError: this.test is not a function

How to I refer to this within a JQuery event callback function?

Answer 1

You'll need to bind the onChange callback to the context:

onChange: function(a, b) {
  this.test();
}.bind(this)

You could also use an arrow function:

onChange: (a, b) => {
  this.test()
}

Answer 2

Here is a solution

var Search = React.createClass({ 
  componentDidMount: function() { 
  var that = this;
  $('#searchindexcheckinout').datepicker({
    language: 'fr',
	minDate: new Date(),
	firstDay: 0,
    onSelect: function(formattedDate, date, inst) { 
      that.GetResult();
    }
  });    
}, 
GetResult: function() {
  alert();
}, 
render: function() { 
       ...
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>

$('#searchindexcheckinout').datepicker({
  language: 'fr',
  minDate: new Date(),
  firstDay: 0
});