javascript - onClick 带参数的匿名函数 vs onClick(function(arguments))

Question

我想知道为什么在某些类型的事件中，例如 onClick ，我必须声明一个匿名函数来执行 onClick如果我的函数包含参数。
示例 : https://codesandbox.io/s/suspicious-ramanujan-v998u

export default function App() {

  const myValue = "MY VALUE";

  
  const handleClick = (anyString) => {
    console.log(anyString);
  };
  

  const anotherClick = () => {
    console.log("It works");
  };

  return (
    <>
      <Button onClick={() => anotherClick()} color="primary">
        Works without arguments <-- Works
      </Button>
      <Button onClick={anotherClick} color="secondary">
        Works without arguments <-- Works
      </Button>
      <Button onClick={() => handleClick(myValue)} color="primary">
        Works with arguments <-- Works
      </Button>
      <Button onClick={handleClick(myValue)} color="secondary">
        Does NOT work with arguments <-- Does NOT work
      </Button>
    </>
  );
}

问题
如果我要执行的函数有参数，我不明白为什么我必须创建一个匿名函数。
为什么我必须做 onClick={() => handleClick(myString) }?
为什么 onClick={handleClick(myString)}是不足够的？

Answer 1

onClick接受回调，即单击按钮时将调用的函数。

anotherClick是一个函数，所以它可以正常工作，因为它被正确调用

() => anotherClick()相当于这个

...
const myTempFunction = () => {
  anotherClick();
}
...
onClick={myTempFunction}

由于您最终将函数传递给 onClick有用

() => handleClick(myValue)原因同上，等效代码为

...
const myTempFunction = () => {
  handleClick(myValue);
}
...
onClick={myTempFunction}

handleClick(myValue) ，现在你实际上是在调用函数，你将函数返回的值传递给 onClick ，而不是函数本身，
等效代码为

...
const myResult = handleClick(myValue); // This is the result of calling the function
...
onClick={myResult} // myResult isn't a function, it's the return value of handleClick(myValue)

由于您实际上并未将函数传递给 onClick , onClick不能被调用并且它不起作用