如何直接调用回调来修复Reaction类组件中的&#39；this&#39；？ [英] How calling a callback directly fixes the 'this' in a React Class Component?

问题描述

我想了解当函数在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 unfinition错误。然后我们知道如何绑定‘this’等等。我觉得我刚刚记住了答案，现在想了解其中的不同之处。

推荐答案

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

就您关于this的值的问题而言，值的设置取决于函数的调用方式。这不是特定的反应，这只是在Javascript中如何设置this的值。

我注意到，当我直接调用它时，访问它没有问题 状态，而不会出现著名的未定义‘this’错误

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

当您仅将其作为引用传递时，著名的‘this’是未定义的 错误返回

这是添加事件侦听器的正确方式，但会出现错误，因为当javascript调用事件处理程序函数时，this的值不是您的组件，即Accordion。

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

• 使用.bind()显式设置this

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

• 使用箭头函数而不是常规函数作为事件处理程序

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

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

• "this" is undefined inside an anonymous function returned by another function React

• How does React share methods between classes(components)

这篇关于如何直接调用回调来修复Reaction类组件中的&#39；this&#39；？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！