ReactJS：打电话给这个＆＃39;在JQuery事件监听器函数中

Question

我试图在JQuery事件回调中引用this（即ReactJS组件）：

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

然而它说：

TypeError: this.test is not a function

如何在JQuery事件回调函数中引用this？

Answer 1

您需要将onChange回调绑定到上下文：

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

你也可以使用箭头功能：

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

Answer 2

这是一个解决方案

<div class="container">
    <!--<h3>Grid 1</h3>-->
    <div class="row">
      <div class="col-sm-12">
          <div class="row">
              <div class="col-sm-6 margin_bottom">
                  <img src="http://placehold.it/600x410" alt="5" class="img-responsive"></img>
              </div>
              <div class="col-sm-6">
                  <div class="row">
                      <div class="col-sm-12 margin_bottom">
                          <img src="http://placehold.it/600x200" alt="5" class="img-responsive"></img>
                      </div>
                  </div>
                  <div class="row">
                      <div class="col-xs-6 col-sm-6">
                          <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
                      </div>
                      <div class="col-xs-6 col-sm-6">
                        <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!--<h3>Grid 2</h3>-->
  <div class="row">
      <div class="col-sm-4 margin_bottom">
          <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
      </div>
      <div class="col-sm-4">
          <div class="row">
              <div class="col-xs-6 col-sm-12 margin_bottom">
                  <img src="http://placehold.it/400x250" alt="5" class="img-responsive"></img>
              </div>
              <div class="col-xs-6 col-sm-12 margin_bottom">
                  <img src="http://placehold.it/400x250" alt="5" class="img-responsive"></img>
              </div>
          </div>
      </div>
      <div class="col-sm-4 margin_bottom">
          <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
      </div>
  </div>
  <!--<h3>Grid 3</h3>-->
  <div class="row">
    <div class="col-sm-3 margin_bottom">
        <img src="http://placehold.it/300x410" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-sm-6 margin_bottom">
        <img src="http://placehold.it/600x410" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-sm-3 margin_bottom">
        <div class="row">
            <div class="col-xs-6 col-sm-12 margin_bottom">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
            <div class=" col-xs-6 col-sm-12">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
        </div>
    </div>
  </div>
  <!--<h3>Grid 4</h3>-->
  <div class="row">
    <div class="col-sm-3 margin_bottom">
        <div class="row">
            <div class="col-xs-6 col-sm-12 margin_bottom">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
            <div class=" col-xs-6 col-sm-12">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
        </div>
    </div>
    <div class="col-sm-6 margin_bottom">
        <img src="http://placehold.it/600x410" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-sm-3 margin_bottom">
        <div class="row">
            <div class="col-xs-6 col-sm-12 margin_bottom">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
            <div class=" col-xs-6 col-sm-12 margin_bottom">
                <img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
            </div>
        </div>
    </div>
  </div>
</div>

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>