React JS - Способы привязки событий

Что является обязательным?

Связывание событий сообщает браузеру, что эта функция должна вызываться всякий раз, когда это событие запускается, или, другими словами, всякий раз, когда событие запускается, должна вызываться функция, которая связана с событием.

Bind создает новую функцию, для которой this будет установлено значение первого параметра, переданного в bind().

Пример привязки событий в JS.

var module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}
var unboundGetX = module.getX;
console.log(unboundGetX()); 
// The function gets invoked at the global scope
// expected output: undefined
var boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

Обычно, как мы связываем событие с функцией в React. Здесь мы используем bind(), чтобы связать событие с функцией, при нажатии кнопки будет вызываться callOnClick(). Обычно мы связываем вещи только в конструкторе.

import React from 'react';
class MyComponent extends React.Component {
 constructor(props) {
  super(props);
  this.callOnClick = this.callOnClick.bind(this);
 }
 callOnClick() {
  console.log("Button is clicked");
 }
 render() {
  return <button onClick={this.callOnClick}> Click me!</button>
 }
}

Связывание с функциями стрелок

Стрелочная функция не имеет собственного this; используется значение this окружающего контекста выполнения.

Однако, когда вы пишете onClick={this.callOnClick}, функция не выполняется, но ее ссылка назначается функции onClick, которая затем вызывает ее, в результате чего this становится неопределенным внутри функции, поскольку функция выполняется в контексте объекта window.

// not recommended
import React from 'react';
export default class MyComponent extends React.Component{
 callOnClick = () => {
  console.log("Button is clicked");
 }
 render(){
  return <button onClick={this.callOnClick}>Click me!</button>
 }
}

Вот почему мы используем этот способ. Теперь, несмотря на то, что onClick={(e) => this.callOnClick(e)} работает, всякий раз, когда вызывается рендеринг, создается новый экземпляр функции. В вашем случае этого легко избежать, просто создав функцию callOnClick, используя синтаксис стрелочной функции.

import React from 'react';
export default class MyComponent extends React.Component {
 callOnClick (e) {
  console.log("Button is clicked", e.target.name);
 }
 render() {
  return <button name="MyButton" onClick={(e) => this.callOnClick(e)}>Click me!</button>
 }
}

Связывание событий дочернего компонента с функцией родительского компонента

props - это единственный способ связать функцию родительского компонента с событиями дочернего компонента.

import React from 'react';
export default class MyComponent extends React.Component {
 callOnClick = () => {
  console.log("Button is clicked");
 }
 render() {
  return <ChildComponent callOnClick={this.callOnClick} />
 }
}
class ChildComponent extends React.Component{
 render() {
  return <button onClick={this.props.callOnClick}>Click me!</button>
 }
}

Если вам понравилась эта статья. нажмите кнопку аплодисментов! 👏 Подписывайтесь на меня в Github, Twitter, Facebook.