Reactjs React事件处理程序在没有绑定的情况下工作（）

我正在学习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;

import React，{Component}来自“React”；
类计数器扩展组件{
状态={
计数：0，
};
handleIncrement（）{
console.log（this.state）；
console.log（this.props）；
}
render（）{
返回(
增量
);
}
}
导出默认计数器；

任何直接从render方法调用的函数都将获得容器对象，如

this

但是当我们将一个函数分配给onClick事件时，我们不想立即调用该函数。。。我们这样分配它

<button onClick={this.handleIncrement}>

（仅函数名，末尾不带

（）

）。。。这表示在单击按钮时调用函数

但是，当您单击按钮时，将不再从

render

方法调用该函数，因此

此

引用将被更改并产生错误

在本例中，您将

（）

添加到

this.handleIncrement

函数中，该函数立即调用它。。。因此，它不会引起任何问题，但在几乎所有情况下，它都会给您错误的结果，因为它不会在

单击时被调用，但会在每次渲染时被调用

由于您的简单代码仅在单击按钮时渲染，因此它可能正在纠正问题添加第二个按钮，它将给出错误的结果，或者UI将冻结

正确的方法是在
之后删除
（）
。处理increament
并在构造函数中绑定函数
this.handleIncreament=this.handleIncreament.bind（this）
如上所述，在元素呈现时而不是单击按钮时调用
this.handleIncreament（）

您需要将函数句柄本身提供给
onClick
，并在构建时将其提供给正确的上下文，以便始终访问
handleIncrement（）中的
计数器的实例

以下是他在答复中提出的建议的实际执行情况：


const{Component}=React；
类计数器扩展组件{
状态={count:0}；
handleIncrement=this.handleIncrement.bind（this）；
handleIncrement（）{
const{count}=this.state；
this.setState（{count:count+1}）；
}
渲染（）{
返回
Count{this.state.Count}
增量
;
}
}
ReactDOM.render（，document.querySelector（'main'）

如果没有bind（）方法，您可以直接在handleincrement中使用arrow函数。
检查下面的代码


const{Component}=React；
类计数器扩展组件{
状态={count:0}；
handleIncrement=（）=>{
const{count}=this.state；
this.setState（{count:count+1}）；
}
渲染（）{
返回
Count{this.state.Count}
增量
;
}
}
ReactDOM.render（，document.querySelector（'main'）
问题是，当您的事件处理程序需要从本地范围访问
此
时，您可以这样调用该方法
this.handleClick（）
，您告诉JavaScript在方法到达那里时立即实现该方法的任务（在您的例子中，它立即被呈现），这通常不需要绑定到
this

但是当你“调用”（我把它放在引语中，因为正确的词应该是reference）这样的方法时
this.handleClick
，实际上您指的是该方法（意味着仅当用户执行某项操作时才应调用它），而不是立即调用它。这需要绑定
This.handleClick=This.handleClick.bind（This）或对方法使用箭头函数
handleClick=（）=>{}。它主要用于
onClick
功能

代码中没有出现该错误，因为包含了括号-
this.handleIncrement（）
。如果删除括号后仍
控制台日志
此.状态
在
handleIncrement
中，则肯定会出现
未定义
错误。但是，如果您的
handleIncrement
仅记录状态之外的内容，则不会得到错误

如果您理解我的基本解释，请接受答案。
我同意

这将是调用函数的正确方法。但由于它是一个回调，它将不知道这是什么，因为它不在相同的上下文中

明确了为什么我们应该始终将回调函数与
this
绑定，以使上下文在该特定函数中可用

但是，如果您不想绑定函数，react文档中提到了两种变通方法

公共类字段语法

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;

ReactDOM.render(<Counter/>, document.querySelector('main'));

import React，{Component}来自“React”；
类计数器扩展组件{
状态={
计数：0，
};
handleIncrement=（）=>{
console.log（this.state）；
console.log（this.props）；
}
render（）{
返回(
增量
);
}
}
导出默认计数器；
ReactDOM.render（，document.querySelector（'main'）；

箭头功能

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;

import React，{Component}来自“React”；
类计数器扩展组件{
状态={
计数：0，
};
handleIncrement（）{
console.log（this.state）；
console.log（this.props）；
}
render（）{
返回(
this.handleIncrement（）}>
增量
);
}
}
导出默认计数器；

有关更多详细信息，请参阅此链接。
欢迎使用Stack Overflow Benedikt！您正在直接调用
this.handleIncrement
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;

ReactDOM.render(<Counter/>, document.querySelector('main'));

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;