如何在 React 中正确绑定 onClick 事件避免字符串赋值错误

张开发
• 2026/4/14 23:37:30 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何在 React 中正确绑定 onClick 事件避免字符串赋值错误
React 中 onClick 期望接收一个函数若直接写 onClick{window.href...} 会立即执行赋值并返回字符串导致类型错误正确做法是传入箭头函数或命名函数来延迟执行。 react 中 onclick 期望接收一个函数若直接写 onclick{window.href...} 会立即执行赋值并返回字符串导致类型错误正确做法是传入箭头函数或命名函数来延迟执行。在 React 中事件处理函数如 onClick必须是函数引用而非函数调用结果或任意值。常见错误如以下代码button onClick{window.location.href https://github.com/} classNamebtn btn-github Visit GitHub/button这段代码会在组件渲染时立即执行 window.location.href ...将其赋值为字符串 https://github.com/而 onClick 实际接收到的是该字符串值string 类型违反了 React 的事件处理器类型约束因此控制台报错Expected onclick listener to be a function, instead got a value of string type? 正确写法使用箭头函数包裹执行逻辑确保 onClick 接收的是函数button onClick{() { window.location.href https://github.com/; }} classNamebtn btn-github Visit GitHub/button?? 注意事项不要漏掉 () 和 {}() {...} 是函数定义() ...无大括号仅适用于单表达式且需显式 return 文心快码 文心快码Comate是百度推出的一款AI辅助编程工具

更多文章