React JS：调用事件处理程序

Question

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

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

谁能给我解释一下这背后的 logic/theory？

Answer 1

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

在第一种情况下，它起作用是因为您将 someEventHandler 传递给 onClick，它在触发事件时被调用。对该函数的调用类似于 someEventHandler()

现在第二种情况，

onClick={()=>someEventHandler}

传递给 onClick 的函数是 ()=>someEventHandler，可以进一步阐述为 ()=> { return someEventHandler; }

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

它在最后一种情况下像onClick={()=>someEventHandler(id)}一样工作，因为当事件处理程序被调用时，它也调用了带有id的someEventHandler。

但是您不需要传递 id 来调用它，您可以像 onClick={()=>someEventHandler()} 一样简单地使用它并且它可以工作，前提是您不需要 id 作为 someEventHandler 中的参数。

当您使用 onClick={()=>someEventHandler()} 而不是 onClick={someEventHandler} 之类的函数时要注意的另一件事是，您的 someEventHandler 不会被任何参数调用。如果您希望将事件作为参数传递给 someEventHandler，则需要像

一样显式传递它

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

Answer 2

onClick={someEventHandler} 将在您的组件在屏幕上显示 loaded/rendered 时立即触发处理程序，但是通过在处理程序之前添加一个箭头函数，这样 - onClick={()=> someEventHandler} 将确保不会在单击之前触发组件

React JS：调用事件处理程序

React JS: calling event handlers

javascript

reactjs

react-component