如何调用回调直接修复 React 类组件中的“this”？答案

【问题标题】：How calling a callback directly fixes the 'this' in a React Class Component?如何调用回调直接修复 React 类组件中的“this”？
【发布时间】：2020-09-25 13:27:16
【问题描述】：

我想了解当在 JSX 中调用函数作为 eventHandler 的回调时，'this' 的值是如何设置的。我注意到，当我直接调用它时，访问状态不会出现著名的未定义“this”错误，如下所示：

import React from "react";

class Accordion extends React.Component {
  state = { term: "random term" };

  onTitleClick() {
    console.log("Title is clicked");
    console.log(this.state.term);
  }

  render() {
    const renderedItems = this.props.items.map((item) => {
      return (
        <React.Fragment key={item.title}>
          <div className="title active" onClick={this.onTitleClick()}>
            <i className="dropdown icon"></i>
            {item.title}
          </div>
          <div className="content active">
            <p>{item.content}</p>
          </div>
        </React.Fragment>
      );
    });
    return <div className="ui styled accordion">{renderedItems}</div>;
  }
}

export default Accordion;

当您将它作为参考传递时，著名的 'this' is undefined 错误又回来了。然后我们知道如何绑定'this'等等。我觉得我只是记住了解决方案，现在想了解其中的区别。

【问题讨论】：

在 JavaScript 中，this 的默认行为是它引用调用它的上下文。在您的代码中onClick={this.onTitleClick()} 意味着onTitleClick() 函数在声明state.term 的同一上下文中执行；函数声明中的this与函数执行时的this相同（即Accordion类）。 [...继续...]
当您将处理程序作为引用传递给子组件时，函数声明中的this一直引用Accordion类，而执行期间的this引用子组件...但子组件不包含state.term，因此出现错误。

标签： javascript reactjs this

【解决方案1】：

onClick={this.onTitleClick()} - 这不是您设置事件侦听器的方式。您只需要传递函数的名称，而不是自己调用它。

就您关于this 值的问题而言，值的设置取决于函数的调用方式。这不是 React 特有的，这就是在 Javascript 中设置 this 的值的方式。

我注意到当我直接调用它时，访问没有问题状态没有得到著名的未定义的“this”错误

那是因为当你这样调用它时：this.onTitleClick() - onTitleClick() 在 this 上被调用，它指的是 Accordion 组件。但正如本答案开头所述，这不是您设置事件侦听器的方式。而不是自己调用这个方法，你需要让javastipt调用它。

当您将它作为参考传递时，著名的“this”是未定义的错误又回来了

这是添加事件侦听器的正确方法，但您会收到错误消息，因为当 javascript 调用事件处理函数时，this 的值不是您的组件，即Accordion。

要解决此问题，您有两种选择：

使用.bind() 显式设置this

this.onTitleClick = this.onTitleClick.bind(this);

使用箭头函数代替常规函数作为事件处理程序

onTitleClick = () => {
   console.log("Title is clicked");
   console.log(this.state.term);
}

以下几个相关问题可能有助于进一步理解this：

【讨论】：

感谢您的回答，当我在 JSX 中调用它时，我想知道 'this' 的值是什么。仅用于学习目的。我知道您不会像我提供的那样直接调用您的事件处理程序回调。因为它将在渲染时调用，而不是作为普通处理程序运行。它如何指向手风琴？

【解决方案2】：

当您将它作为引用传递时，this 未定义。为了使其工作，您需要将函数绑定到类。你可以在构造函数中这样做

constructor(props) {
    this.state = { term: "random term" };
    this.onTitleClicked = this.onTitleClicked.bind(this);
}

另外，当你传递给组件时，不要调用函数，直接传递

<div className="title active" onClick={this.onTitleClick}>

注意this.onTitleClick 调用时缺少括号。

【讨论】：