如何在 React 中正确使用 onClick 事件避免类型错误

张开发
• 2026/4/18 23:44:23 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何在 React 中正确使用 onClick 事件避免类型错误
React 中 onClick 期望接收一个函数若传入字符串或直接执行表达式如 window.href...会触发“Expected onclick listener to be a function”错误正确做法是传递箭头函数或具名函数包裹逻辑。 react 中 onclick 期望接收一个函数若传入字符串或直接执行表达式如 window.href...会触发“expected onclick listener to be a function”错误正确做法是传递箭头函数或具名函数包裹逻辑。在 React 中事件处理器如 onClick必须是函数引用而非函数调用结果或原始值。常见错误是将赋值语句、跳转逻辑等直接写在花括号内导致 JSX 在渲染时立即执行返回 undefined 或字符串从而违反 React 的事件监听器类型约束。例如以下写法是错误的button onClick{window.href https://github.com/} classNamebtn btn-github Visit GitHub/button这段代码的问题在于window.href ... 是一条赋值语句执行后返回字符串 https://github.com/React 将该字符串作为 onClick 处理器但框架只接受函数类型因此抛出 Expected onclick listener to be a function, instead got a value of string type 错误同时该赋值在组件渲染阶段就已执行而非点击时完全违背交互意图。? 正确写法使用箭头函数包裹副作用逻辑推荐用于简单操作 蝉妈妈AI 电商人专属的AI营销助手

更多文章