Реактивная функция и «это»

Question

Я знаю об этом "связывании" и обо всех других вещах здесь, кроме одной вещи. Я не могу понять, как "это" не определено в первом вызове, но во втором?

P.S. Я знаю о ссылке на функцию и о том, что в первом случае она выполняет функцию, а во втором случае возвращает ссылку.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();
    this.name = "MyComponent";
    // this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this);
    console.log(this.name);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick()}>click 1</button>
        <button onClick={this.handleClick}>click 2</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

в первой строке

<button onClick={this.handleClick()}>click 1</button>

this.handleClick() будет выполняться в функции render компонента App (который сам по себе является class), пока компонент отображается в виртуальном DOM. Таким образом, к моменту выполнения функция handleClick будет определена в контексте выполнения, который является App class.

Во второй строке

<button onClick={this.handleClick}>click 1</button>

this.handleClick присоединен к DOM и будет выполняться из контекста DOM, когда произойдет событие click, и выполнение будет искать handleClick в контексте DOM и будет undefined.

Есть два способа обойти это

1. bind метод для класса, как вы сделали.

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

вот так

<button onClick={(e) => this.handleClick(e)}>click 1</button>