在 react.js 功能组件中，onClick 或任何事件如何工作？答案

【问题标题】：In react.js functional component, how does onClick or any event work?在 react.js 功能组件中，onClick 或任何事件如何工作？
【发布时间】：2020-11-27 05:38:09
【问题描述】：

我正在学习 react.js 功能组件，我是用 useState() 的方法来的。这给出了一个数组作为回报[currentState, stateSetter]。现在，如果我们在事件中使用stateSetter()。我们知道事件的名称不同。那么它如何访问handleClick() 函数。既然没有在作用域内定义？

import React, {useState} from 'react';

function App(props) {
  
  const [name, setName] = useState("name1");
  
  const handleClick = () => {
    setName("name2");
  }
  
  return (
    <div>
      <p>Hello, {name}</p>
      <button onClick = {handleClick}></button>
    </div>
  )
}

【问题讨论】：

范围内到底有什么没有定义？
上面的代码完美运行我只是不知道它是如何工作的。在类组件中，当我们想要使用任何方法时，我们将其绑定到 this 的值，这样我们就可以在任何事件发生时使用类内部的方法。因为当事件被调用时，它们的调用方式不同，在我的示例中，handleClick() 是在App() 内部定义的，因此它在App() 之外不可用。那么onClick()如何访问handleClick()。
setName 在 closure 中定义，它将它绑定到 handleClick 的词法环境，因此可以在 onClick 回调中访问。

标签： javascript reactjs

【解决方案1】：

这很简单，因为您正在向onClick 函数传递对您定义的函数的引用，并将其保存为名为@987654322@ 的变量的值。只要 JS 能够解析该变量的引用，该变量引用的函数或值就会被执行。

这与 classes Component 相同，当我们将 this.handleClick 传递给标签的 onClick 属性时，我们只是传递了对该函数的引用。

【讨论】：

【解决方案2】：

因为与 Class 基础组件不同，函数式组件没有实例，所以在使用时无需使用 this 或在其中绑定函数。

这是您可能想查看的另一个答案：functional component

【讨论】：