Javascript React JS：调用事件处理程序

我最近开始在React工作。我注意到一个行为，比如当我试图用相同的组件调用我的事件句柄时 onClick={someEventHandler}它正在触发，但当我尝试像这样做时，onClick={（）=>someEventHandler}不起作用

我注意到，当我需要传递任何参数并调用onClick={（）=>someEventHandler（id）}之类的函数时，它工作正常

---

有人能给我解释一下这背后的逻辑/理论吗？

onClick事件处理程序需要一个传递给它的函数。当事件被触发时，它调用传递给它的处理函数

在第一种情况下，它起作用是因为您将

someEventHandler

传递给onClick，在触发事件时调用onClick。对函数的调用类似于

someEventHandler（）

现在在第二种情况下

onClick={()=>someEventHandler}

传递给onClick的函数是

（）=>someEventHandler

，可以进一步细化为

（）=>{returnsomeeventhandler；}

现在，如果您注意到上面的内容，您将从onClick事件处理程序返回一个函数。返回的函数现在永远不会被调用，因此您可以看到上面的行为

它在最后一种情况下工作，如

onClick={（）=>someEventHandler（id）}

，因为当调用事件处理程序时，它也调用了具有id的someEventHandler

然而，您不需要传递id来调用它，只要像

onClick={（）=>someEventHandler（）}

那样使用它就可以了，只要您不需要id作为someEventHandler中的参数

当您使用像

onClick={（）=>someEventHandler（）}

这样的函数而不是

onClick={someEventHandler}

时，需要注意的另一点是，您的

someEventHandler

不会被任何参数调用。如果希望将事件作为参数传递给someEventHandler，则需要像

onClick={(e)=>someEventHandler(e)}

---

onClick={someEventHandler}

将在您的组件在屏幕上加载/呈现后立即触发处理程序，但通过在处理程序之前添加箭头函数，就像这样-

onClick={（）=>someEventHandler}

将确保在单击组件之前不会触发该组件

我认为您误解了这个问题

onClick={someEventHandler}

有效，但

onClick={（）=>someEventHandler}

无效。第一个不会触发处理程序。它只是将处理程序传递给

onClick

。您将此与

onClick={someEventHandler（）}

混淆，这确实是不正确的。@FelixKling是的，您是对的。我正在研究这些精确的东西，我想我已经看到了上面提到的带括号的函数。谢谢你对Shubham的清晰解释。