Цель .bind(this) в конце обратного вызова ajax?

Ответ 1

Это гарантирует, что this будет правильным объектом внутри обратного вызова. См. Function.prototype.bind().

Альтернативой для реагирования является:

myAjaxFunction: function(){
  $.getJSON('/something', this.handleData);
},
handleData: function(data){
  this.setState({data: data});
}

Это работает, потому что React обрабатывает привязку методов компонентов для вас.

Если вы запустили свой исходный код без привязки, вы получите эту ошибку: TypeError: undefined is not a function, потому что this === window в обратном вызове

или в строгом режиме: TypeError: Cannot read property 'setState' of undefined, где this === undefined в обратном вызове.

Ответ 2

Назначение .bind(this) в конце обратного вызова ajax позволяет this быть связанным с вашим классом реагирования. Другими словами, вы можете добавить:

var self = this;

вне ajax, и он работает одинаково. Вы код равный:

var self = this;
$.ajax({
    .
    .
    data: JSON.stringify({text: text}),
    success: function (data) {
        self.setState({data: data});
    },
    .
    .
});

Ответ 3

Обновленный ответ в 2019 году мы можем выбрать для использования bind(this) или нет в настоящее время.

1) Традиционным способом мы можем использовать bind(this) в конструкторе, так что когда мы используем функцию в качестве обратного вызова JSX, контекстом this является сам класс.

class App1 extends React.Component {
  constructor(props) {
    super(props);
    // If we comment out the following line,
    // we will get run time error said 'this' is undefined.
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor(e) {
    e.currentTarget.style.backgroundColor = "#00FF00";
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <button onClick={this.changeColor}> button</button>
      </div>
    );
  }
}

2) Если мы определяем функцию как атрибут/поле класса, нам больше не нужно использовать bind(this).

class App2 extends React.Component {
  changeColor = e => {
    e.currentTarget.style.backgroundColor = "#00FF00";
    console.log(this.props);
  };
  render() {
    return (
      <div>
        <button onClick={this.changeColor}> button 1</button>
      </div>
    );
  }
}

3) Если мы используем функцию стрелки в качестве обратного вызова JSX, нам также не нужно использовать bind(this). И еще больше, мы можем передать параметры. Выглядит хорошо, не правда ли? но его недостатком является проблема производительности, подробности см. в документе ReactJS.

class App3 extends React.Component {
  changeColor(e, colorHex) {
    e.currentTarget.style.backgroundColor = colorHex;
    console.log(this.props);
  }
  render() {
    return (
      <div>
        <button onClick={e => this.changeColor(e, "#ff0000")}> button 1</button>
      </div>
    );
  }
}

И я создал Codepen для демонстрации этих фрагментов кода, надеюсь, это поможет.