Question

我知道这里的“ this”绑定和所有其他内容，除了一件事。我不明白在第一次调用中不是如何定义“ this”，而在第二次调用中却未定义？

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()将在虚拟DOM中呈现时，在render组件（本身就是App）的class函数中执行。因此，在执行时，将在handleClick类的执行上下文中定义App函数。

在第二行

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

this.handleClick附加到DOM，并在发生click事件时从DOM上下文执行，并且执行将在DOM的上下文中查找handleClick，并且为undefined。

有两种方法可以避免这种情况

bind像您一样对类进行操作。
传递一个匿名函数，该函数将在没有DOM上下文的情况下执行，并且默认情况下绑定到调用者的上下文。

像这样

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

React函数和“ this”

1 个答案: