Javascript 在React中，为什么我们在arrow函数中调用它？

我有个问题。。请让我知道

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;

import React，{Component}来自“React”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
handleClick=（）=>{
console.log（“单击”）
};
render（）{
返回(

{this.state.letters.map（（letter）=>(
this.handleClick（）}>//单击li时，它会工作。
handleClick（）}>//当单击li时，它不起作用为什么？？？？
你好

))}

);
}
}
导出默认应用程序；

这是非常简单的代码

我的问题是为什么我们要这样写

在我看来

• 单击li标记时
• 这个.handleClick函数是箭头函数
• 所以，arrow函数会自动绑定它
• （在这种情况下，它绑定到应用程序组件）
• 因此，在arrow函数中，可以找到handleClick，（//在我看来）
• 因为可以找到这个.handleClick
• 但是，仅仅写handleClick是不起作用的？为什么？ //handleClick未找到错误

你能解释一下为什么会这样吗

另外

如果我更改代码，比如

console.log（this）}/>

我们可以看到这是应用程序组件。 同样在应用程序组件中，我们可以看到handleClick函数

所以，这是绑定到应用程序组件的，

---

然后我想在arrow函数中，可以找到handleClick（）函数。但是没有发现。。。为什么？？？

您似乎混淆了箭头函数的含义，用您的话说就是“自动绑定”。从技术上讲，这不是正在发生的事情。请参阅MDN文章：

它们不会自动绑定

此

，它们只是不会创建新的

此

绑定（与函数相反，函数本身会创建新的

此

绑定）。虽然你可以认为这是“自动”绑定

这个
，但事实并非如此。但关键的一点是，它只影响箭头函数范围内的
这
的含义。它与功能之外的
内容无关。因此，您将
handledClick
定义为箭头函数的事实与您是否可以使用
this
访问它没有关系。它只影响函数本身中该
所指的内容

所有这些都解释了为什么调用
this.handleClick
会在
渲染中起作用，但尝试调用
handleClick
则不会起作用。
render
范围内没有函数
handleClick
。有一个
this
（组件的实例），它碰巧有一个
handleClick
方法

在此上下文中使用箭头函数非常有用，因为您不必重新绑定它。如果您的
handleClick
功能需要访问
this.state
或
this.props
，它将能够。如果将其定义为标准的
函数
，则需要重新绑定它，以便在调用该函数时可以使用正确的
this

正如其他人所指出的，您的代码可能无法正常工作。您应该删除包装它们的箭头函数。实际上，您只是调用一个返回
handleClick
函数的函数，而不是调用它。
this.handleClick}>
不会做任何事情，您只是引用一个不会被调用的函数，因为handleClick是类App的一个方法，您需要指定这个.method来访问它。你可以做onClick={this.handleClick}也应该是
this.handleClick（e）}>
或
，而不是
this.handleClick}>
。当然你是对的，我编辑了这篇文章，但我的问题并没有改变…但在arrow函数中，如果我修改了类似onClick={（）=>console.log（this）}的代码。我们可以看到这是应用程序组件。同样在应用程序组件中，我们可以看到handleClick函数。。。所以，我认为这是有界的应用程序组件，然后在箭头函数中，我们可以找到handleClick（）。。但是没有发现。。。为什么？问题不在于它为什么不起作用，而在于它为什么会起作用，就像allready解释的那样，对于arrow和常规函数，
this
的不同绑定只会改变函数上下文中所考虑的
this
。e、 g.
const log1=（）=>console.log（this）
将记录应用程序组件，而
function log2（）{console.log（this）}
将记录函数对象。无论哪种方式，在组件内部，您都无法使用
log1（）
，
log2（）
访问这两个函数，但您需要调用
this.log1（）
和
this.log2（）
，这两个函数都是错误的。。。这是一个与班级政策有关的问题。。。在类中，我们必须使用this.func访问变量或函数。尽管有箭头功能，我还是找到了原因