时间戳

首页 > 解决方案 > 在 reactjs 事件处理中传递 {SomeFunction} 和 {SomeFunction()} 的区别

javascript - 在 reactjs 事件处理中传递 {SomeFunction} 和 {SomeFunction()} 的区别

问题描述

import React from "react";

const FunctionClick = () => {
  const clickHandler = () => {
  console.log("Button clicked.");
  };

  return (
    <div>
      <button onClick={clickHandler}>Click</button>
    </div>
  );
};

export default FunctionClick;

{ REACT NOOBIE ALERT } 在上面的代码中，我可以看到输出的不同

<button onClick={clickHandler}>Click</button>

和

<button onClick={clickHandler()}>Click</button>

但是有人可以解释为什么我们要传递函数而不是调用它吗？

即使我们想在单击按钮时调用它，当页面加载时如何调用函数（在第二个代码中）。

标签： javascriptreactjs

解决方案

在这里，您传递的是函数（对象）引用，除非您明确调用它，否则它不会被调用，因为它在onClick点击事件发生时调用该函数。

<button onClick={clickHandler}>Click</button>

在这里，您正在传递 的返回值clickHandler，现在这取决于您从哪个值/对象返回clickHandler，因为反应中的 onClick 期望调用函数引用，因此您必须从中返回一个函数，clickHandler否则它将引发错误。

<button onClick={clickHandler()}>Click</button>

推荐阅读