Javascript 带参数的onClick匿名函数vs onClick（函数（参数））

我想知道为什么在某些类型的事件中，例如

onClick

，如果我的函数包含参数，我必须声明一个匿名函数来执行

onClick

示例：

导出默认函数App（）{
const myValue=“我的价值”；
const handleClick=（anyString）=>{
log（anyString）；
};
const anotherClick=（）=>{
console.log（“它工作”）；
};
返回(
另一个单击（）}color=“primary”>
在没有参数的情况下工作您应该在
onClick={func}
中指定一个函数，“func”只引用一个变量

当说
onClick={func（）}
时，您是在添加
func（）
的返回值，而不是在发出事件时指定要执行的
function func（）{}

单击按钮时，将执行
onClick={}
中指定的函数。
这就是你正在做的：

let emit = function () { };
button.addEventListener('click', emit());

单击按钮时，它会尝试将
undefined
作为函数调用，因为函数emit（）已返回
undefined
onClick
接受回调，即单击按钮时将调用的函数

另一个click
是一个函数，因此它可以正常工作，因为它被正确调用
（）=>另一个click（）
与此等效
。。。
常量myTempFunction=（）=>{
再次单击（）；
}
...
onClick={myTempFunction}

因为您最终要将函数传递给
onClick
，所以它可以工作

（）=>handleClick（myValue）
与上述原因相同，等效代码为
。。。
常量myTempFunction=（）=>{
handleClick（myValue）；
}
...
onClick={myTempFunction}

handleClick（myValue）
，现在您实际调用的是函数，您传递的是函数返回给
onClick
的值，而不是函数本身，
等效代码是
。。。
const myResult=handleClick（myValue）；//这是调用函数的结果
...
onClick={myResult}//myResult不是函数，它是handleClick（myValue）的返回值

由于您实际上没有将函数传递给
onClick
，
onClick
无法调用，并且在（）的文档中它不起作用，因此有一个示例

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

这是由于语法扩展的设计，我们称之为JSX模板扩展。当涉及到JSX内部的事件处理时，它需要对回调函数进行
引用，该函数将在特定事件发生后触发

这是在JSX通过Babel转换成JavaScript之前

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

这里可以清楚地看到，second click处理程序直接执行函数，而不是将回调函数传递给
React.createElement
。因为内部React元素需要回调函数来传递给此函数，而您只是尝试执行该函数，而不是解析引用。
，因为重新执行该函数并将其返回的内容分配给单击处理程序。您没有看到它立即被调用吗？
onClick={handleClick（myString）}
立即调用该函数（在渲染期间），并尝试将返回值分配给
onClick
；而
onClick={（）=>handleClick（myString）
传递一个函数引用，该函数引用将在单击时被调用。另外一个重要注意事项-
onClick={anotherClick}
与
onClick={anotherClick（）}
（与上述注释的原因相同）。以下括号表示应该调用函数，这是一个非常重要的区别。
  return (
    <div>
      <Button onClick={anotherClick} color="secondary">
        Works without arguments
      </Button>
      <Button onClick={handleClick(myValue)} color="secondary">
        Does NOT work with arguments 
      </Button>
    </div>
  );

  return React.createElement("div", null, React.createElement(Button, {
          onClick: anotherClick,
          color: "secondary"
        }, "Works without arguments"), 
         React.createElement(Button, {
          onClick: handleClick(myValue),
          color: "secondary"
        }, "Does NOT work with arguments"));