0

CodePen


Есть такой родительский класс:

var ParentClass = React.createClass({

  getInitialState: function () {
    return {
      totalClicks: 0
    };
  },

  handleClick: function () {
    this.setState({
        totalClicks: ++this.state.totalClicks
    });
  },

  render: function () {
    return (
      <div>
        <ChildClass onClick={this.handleClick} />
        &nbsp;{this.state.totalClicks}
      </div>
    );
  }
});

В нём мы определяем обработчик клика ParentClass.handleClick, который передаём в дочерний класс ChildClass через атрибут onClick.


В дочернем классе мы берём из props пришедшую функцию onClick и назначаем её в качестве обработчика события click:

var ChildClass = React.createClass({
  render: function () {
    return (
      <button onClick={this.props.onClick}>
        Click Me!
      </button>
    );
  }
});

Вопрос

Почему сохраняется this:

function() {
  this.setState({
    totalClicks: ++this.state.totalClicks
  });
}

то есть, почему при клике по кнопке изменяется состояние родителя, а не состояние ребёнка (пускай он и без состояния)?

Это поведение неочевидно для меня, ведь обычно this в обработчике, который мы назначаем событиям типа click — это текущий объект, то есть тот, над которым совершилось действие, а не тот, у кого мы взяли этот обработчик.

1 ответ 1

2

Все из-за того что вы используете createClass, он автоматически биндит методы к экземпляру класса

class Component extends React.Component {
    handleClick() {}
}

При таком синтаксисе биндинга уже не будет

2
  • Эх,.. да, там (на CodeCademy) как раз и рассказывается об этом (нужно было просто посмотреть следующий урок :)): Automatic binding allows you to pass functions as props, and any this values in the functions' bodies will automatically refer to whatever they referred to when the function was defined. No binding to worry about!. И ссылка на Changelog ... 3 дек 2016 в 19:08
  • Сам я просто пока доки не читал: решил сначала въехать через CodeCademy, а потом уже доки ... 3 дек 2016 в 19:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.