我最近开始使用 React。我注意到一种行为，例如当我尝试使用相同的组件调用事件句柄时 onClick={someEventHandler} 它正在触发，但是当我尝试像这样 onClick={()=> someEventHandler} 做同样的事情时它不起作用。
我注意到，当我需要传递任何参数并调用像 onClick={()=>someEventHandler(id)} 这样的函数时，它工作正常。
有人可以解释一下这背后的逻辑/理论吗？
【问题讨论】：
标签： javascript reactjs react-component
onClick={someEventHandler} 将在您的组件在屏幕上加载/渲染后立即触发处理程序，但通过在处理程序之前添加一个箭头函数，就像这样 - onClick={()=> someEventHandler} 将确保在您单击之前不触发组件
【讨论】：
onClick={someEventHandler} 有效，但 onClick={()=> someEventHandler} 无效。第一个不会触发处理程序。它只是将处理程序传递给onClick。您将此与 onClick={someEventHandler()} 混淆了，这确实是不正确的。
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)}
【讨论】：