Question

我是 React 新手，想问一些对你们来说可能非常基本的东西..！所以 atm 我正在学习如何使用 State Hook，这里是我在 codeacademy 课程中找到的一些示例代码。

import React, { useState } from "react";
 
function Toggle() {
  const [toggle, setToggle] = useState();
 
  return (
    <div>
      <p>The toggle is {toggle}</p>
      <button onClick={() => setToggle("On")}>On</button>
      <button onClick={() => setToggle("Off")}>Off</button>
    </div>
  );
}

据我所知，useState 返回一个数组，其中包含当前状态和一个用于更新它的函数。如果您查看按钮 JSX 元素，它会在单击按钮时调用 setToggle 函数。

这让我想知道，

'为什么 setToggle 函数用箭头函数包裹？如果 setToggle 是一个改变当前状态的函数，为什么我们不能直接调用它而不将它放在箭头函数中？'。

import React, { useState } from "react";
 
function Toggle() {
  const [toggle, setToggle] = useState();
 
  return (
    <div>
      <p>The toggle is {toggle}</p>
      <button onClick={setToggle("On")}>On</button>
      <button onClick={setToggle("Off")}>Off</button>
    </div>
  );
}

我已经运行了上面的代码，但是它没有用:( 我查找了一些信息，但我不知道这是否太基本或什么，我一直无法找到回答这个问题的文章。

非常感谢您的帮助。

谢谢

Answer 1

onClick 函数应该是一个处理 React.js 中 SyntheticEvent 的事件处理程序。

json

如果有其他情况应该处理事件，您应该指定参数。例如，您要禁用按钮。但如果没有，您可以跳过该参数。

Answer 2

onClick 属性需要一个函数，该函数将在 click 事件发生时被调用。

onClick={setToggle("On")}

在这种情况下，setToggle("On") 的返回值 undefined 被设置为 onClick 事件处理程序。这实际上相当于根本没有事件处理程序，这意味着 click 事件发生时什么也不会发生。

onClick={() => setToggle("On")}

在这种情况下，会创建一个匿名函数，该函数在调用时也会调用 useState。由于 onClick 提供了一个函数，它会在 click 事件发生时执行它，然后 useState 也被调用。

Answer 3

这是 React 的一个很难习惯的方面，因为我们大多数人都熟悉 html 中的 onclick 属性，它调用一个函数，就像这个例子：

onclick="myFunction(arg)"

但是 React 的 onClick 不是这样工作的。相反，它更像是 Javascript 的 addEventListener。您为其分配一个函数而不是调用函数。如果您希望事件执行的函数正在传递参数，那么正如您所注意到的，它会变得更加复杂，因为您必须将函数调用包装在匿名函数中。如果一个人来自习惯于使用 html 的 onclick 属性的上下文，那没有任何意义。但这正是 React 语法的工作原理。

出于某些技术原因，它的工作方式是这样的：Is React onClick more like a JavaScript addEventListener than like a standard JavaScript onclick attribute?

React-Hooks：如何调用 useState 返回的函数

3 个答案: