Привязка функции к экземпляру компонента React

Question

Я читал документацию React и заметил один момент, который не очень мне понятен. Есть несколько способов привязать функцию к экземпляру компонента, но чему отличаются эти 2 способа?

Почему если объявить функцию не как стрелочную и не привязать ее в конструкторе, то функция не сработает? Это ведь тоже функция в классе, просто она объявлена другим образом

Первый способ

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('По кнопке кликнули');
  }
  render() {
    return <button onClick={this.handleClick}>Нажми на меня</button>;
  }
}

Второй способ:

class Foo extends Component {
 
  handleClick = () => {
    console.log('По кнопке кликнули');
  }
  render() {
    return <button onClick={this.handleClick}>Нажми на меня</button>;
  }
}

Answer 1

Проблема возникает если мы передаем handleClick в дочерний компонент и если внутри handleClick есть ссылка на this текущего класса. Вот пример:

  import React from "react";
  export default class Foo extends React.Component {
   constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
     this.someValue = "someValue";
   }
 
   handleClick() {
     console.log(this.someValue);
   }
   render() {
     return <OtherComponent handleClick={this.handleClick} />;
   }
 }
 
 const OtherComponent = (props) => {
   return <button onClick={props.handleClick}>Нажми на меня</button>;
 };

Если убрать привязку bind то this.someValue будет не доступно из дочернего компонента так как this будет undefined и возникнет ошибка.

БЛОГ НА HUSL

Привязка функции к экземпляру компонента React

Ответы (1 шт):