React中两种onClick函数调用方式的差异及失效原因解析

为什么 onClick={props.onClickFunction(1)} 无法正常工作？ #

当你在JSX里写 onClick={props.onClickFunction(1)} 时，这不是给点击事件绑定函数，而是直接执行了 props.onClickFunction(1) 这个调用，然后把函数执行后的返回值赋值给了 onClick 属性。

React在渲染组件的过程中，会执行这条语句，这意味着你的函数在页面加载/组件渲染时就被调用了，而不是等到用户点击元素的时候。如果 props.onClickFunction 没有返回一个可执行的函数，那 onClick 拿到的就是 undefined，自然点击元素不会有任何反应；就算它返回了函数，那也是渲染阶段就提前执行了一次目标函数，完全不符合你“点击时触发”的需求。

为什么用 handleClick 箭头函数就能正常运行？ #

你写的 const handleClick = () => props.onClickFunction(1) 是定义了一个新的箭头函数，这里你把这个函数的引用赋值给了 onClick，而不是立即执行它。

当用户点击元素时，React才会调用这个 handleClick 函数，然后在函数内部再去执行 props.onClickFunction(1)，这就实现了“点击时才触发目标函数并传入参数1”的预期效果。

两种调用方式的核心区别 #

• 直接调用写法：props.onClickFunction(1) 是立即执行表达式，在组件渲染阶段就会运行，最终给 onClick 的是函数的返回值（通常不是函数，导致点击无效）。
• 箭头函数包裹写法：() => props.onClickFunction(1)（或者封装成handleClick）是传递函数引用，只有当点击事件触发时，才会执行内部的函数调用，完全符合事件绑定的逻辑。

另外补充一个小知识点：如果不需要给目标函数传参，你可以直接写 onClick={props.onClickFunction}，这时候传递的是函数本身的引用，点击时React会自动调用它并传入事件对象。

内容的提问来源于stack exchange，提问作者Praneeth Kumar