时间戳

首页 > 解决方案 > 在 React 中，为什么我们在箭头函数中调用它？

javascript - 在 React 中，为什么我们在箭头函数中调用它？

问题描述

我有一个问题..请告诉我..

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
  }

  handleClick = () => {
     console.log("clicking")
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.letters.map((letter) => (
            <li  onClick={() => this.handleClick()}> // when clicking li, it works.
            <li  onClick={() => handleClick()}> // when clicking li, it does not works why????
              hello
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

这是非常简单的代码。

我的问题是为什么我们要这样写 this.handleClick ??

在我看来，

你能解释为什么会这样吗？

此外..

如果我更改了 <li onClick={() => console.log(this)} /> 之类的代码

我们可以看到这是 App 组件。同样在 App 组件中，我们可以看到 handleClick 功能...

所以，这是绑定到App Component，然后我想在箭头函数中，可以找到handleClick()函数。但是没有找到……为什么？？

标签： javascriptreactjsarrow-functionses6-class

解决方案

您似乎对箭头功能的含义感到困惑，用您的话来说是“自动绑定它”。从技术上讲，这不是正在发生的事情。请参阅 MDN 文章： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

它们不会自动绑定this，它们根本不会创建新this绑定（与函数相反，函数本身会创建新this绑定）。虽然您可以认为它是“自动”绑定this，但实际上并非如此。一个关键点是它只影响箭头函数范围内this的含义。它与函数之外的内容无关。因此，您定义为箭头函数这一事实与您是否可以使用它无关。它只影响函数本身所指的内容。thishandledClickthisthis

所有这一切都解释了为什么调用this.handleClick会在你的. 范围内没有函数。有一个（组件的实例），它恰好有一个方法。renderhandleClickhandleClickrenderthishandleClick

在这种情况下使用箭头函数很有用，因为您不必重新绑定它。如果你的handleClick函数需要访问this.stateor this.props，它就可以了。如果您将其定义为标准function，则需要重新绑定它，以便在this调用它时可以使用正确的。

正如其他人指出的那样，您的代码可能无法正常工作。您应该删除包装它们的箭头函数。照原样，您只是调用一个返回该函数的handleClick函数，而不是调用它。

推荐阅读