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

IT技术 javascript reactjs this
2021-04-29 23:29:32

我想了解当在 JSX 中调用一个函数作为对 eventHandler 的回调时，“this”的值是如何设置的。我注意到当我直接调用它时，访问状态没有问题，而不会出现著名的 undefined '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”未定义错误又回来了。然后我们知道如何绑定'this'等等。我觉得我只是记住了解决方案，现在想了解其中的区别。

2个回答

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

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

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

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

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

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

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

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

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

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

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

以下是一些可能有助于this进一步理解的相关问题：

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

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

还有，传递给组件的时候，不要调用函数，直接传递

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

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

其它你可能感兴趣的问题
上一篇在 React 组件之间共享数据 下一篇如何在render方法中的react const变量中循环