javascript - React函数和 "this"

Question

我知道“this”绑定(bind)和这里的所有其他内容，除了一件事。我不明白为什么“this”在第一次调用中不是未定义的，但在第二次调用中？

附注我了解函数引用，并且在第一种情况下它正在执行函数，但在第二种情况下返回引用。

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() 将在 App 组件(它是一个 class)的 render 函数中执行> 本身)当组件在虚拟 DOM 中渲染时。因此，在执行时，handleClick函数将在执行上下文中定义，即App类。

在第二行

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

this.handleClick 附加到 DOM，当点击事件发生时，将从 DOM 上下文执行，并且执行将在 DOM 上下文中查找handleClick，并且将是 未定义.

有两种方法可以避免这个问题

1. 将方法绑定(bind)到类，就像您所做的那样。

2. 传入一个匿名函数，该函数将在没有 DOM 上下文的情况下执行，并且默认绑定(bind)到调用者的上下文。

像这样

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