Обработка событий клика в React: использование this.foo

Существует четко определенный синтаксис для обработки событий в React. Если вам необходимо обработать событие клика на кнопке foo, правильный код будет выглядеть следующим образом: <button onClick={this.foo}>. Это даёт вам возможность вызывать функцию foo при каждом клике на кнопку. Важно отметить, что функции обработчика событий в React передаются в качестве функций, а не вызовов функций.

class MyComponent extends React.Component {
  foo() {
    console.log('Button clicked!');
  }

  render() {
    return <button onClick={this.foo}>;
  }
}

В приведенном выше коде функция foo вызывается при каждом нажатии кнопки.

Важная особенность: контекст this

Важно понимать, что смысл this в JavaScript не всегда очевиден, особенно для новичков. В контексте React и JSX, this обычно ссылается на экземпляр компонента. Применительно к нашему вопросу, this.foo ссылается на функцию foo внутри прототипа текущего компонента.

Разница между this.foo и this.foo()

Когда вы используете this.foo, вы передаёте ссылку на функцию. Это значит, что функция будет вызвана только при событии (в нашем случае это клик). Если бы вы использовали this.foo(), вы бы вызвали функцию немедленно, а не при происходящем событии.

В этом ключевая разница и ошибка, которую совершают многие разработчики. Помните, что ваши обработчики событий должны быть функциями, а не вызовами функций (если только вы явно не хотите такого поведения). Это позволит обеспечить надлежащий контроль над выполнением кода и предотвратить возможные ошибки.