reactjs - React 事件处理程序在没有 bind() 的情况下工作

Question

我正在学习一个 React 教程，讲师表明此代码中的事件处理程序将不起作用，因为 this() 正在访问外部环境。但我没有错误。谁能给我解释一下？

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
  };

  handleIncrement() {
    console.log(this.state);
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement()}>
          Increment
        </button>
      </div>
    );
  }
}

export default Counter;

Answer 1

问题是，当您的事件处理程序需要从本地范围访问 this 时，您可以这样调用该方法； this.handleClick()，您是在告诉 JavaScript 立即执行到达那里的方法的任务(在您的情况下，它会立即呈现)，通常不需要绑定(bind)到 这个。

但是当您“调用”(我把它放在引号中是因为正确的词应该是 REFER)这样的方法时； this.handleClick，你实际上指的是方法(意味着它应该只在用户做某事时调用)，而不是立即调用它。这需要绑定(bind) this.handleClick= this.handleClick.bind(this); 或为您的方法使用箭头函数 handleClick = () => {};。它主要用于 onClick 功能。

您的代码中没有出现该错误，因为您包含了括号 - this.handleIncrement()。如果你去掉括号，而 handleIncrement 中仍然有 consoleLog this.state，你肯定会得到 undefined 错误。但是，如果您的 handleIncrement 仅记录状态之外的内容，您将不会收到错误。

如果您理解我的基本解释，请采纳答案。