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

React 中 onClick 期望接收一个函数,若直接写 onClick={window.href='...'} 会立即执行赋值并返回字符串,导致类型错误;正确做法是传入箭头函数或命名函数来延迟执行。 react 中 `onclick` 期望接收一个函数,若直接写 `onclick={window.href='...'}` 会立即执行赋值并返回字符串,导致类型错误;正确做法是传入箭头函数或命名函数来延迟执行。在 React 中,事件处理函数(如 onClick)必须是函数引用,而非函数调用结果或任意值。常见错误如以下代码:<button onClick={window.location.href = 'https://github.com/'} className="btn 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/'; }} className="btn btn-github"> Visit GitHub</button>?? 注意事项:不要漏掉 () 和 {}:() => {...} 是函数定义;() => ...(无大括号)仅适用于单表达式且需显式 return; 文心快码 文心快码(Comate)是百度推出的一款AI辅助编程工具

相关推荐
Decay__9 小时前
SQLServer 索引与 SQL 优化 —— 聚集索引、非聚集索引、覆盖索引、碎片维护与执行计划
运维·数据库·sql·mysql·架构
eggwyw9 小时前
Anaconda安装卸载的详细流程指南
开发语言·python
2601_9679791210 小时前
纯手写:Python安装pip完整教程,搞了几小时,终于成功
python·教程·pip·安装·包管理
Norna10 小时前
缓存文件从没写出来:一个 .json 被当成目录用了
python
笃行35011 小时前
【金仓数据库产品体验官】订单增量同步实战:MERGE、OUTPUT 与 IDENTITY 的兼容验证
数据库
金銀銅鐵11 小时前
带您看懂字节码指令(三):同一行加法,为什么有四种指令
java·jvm
jyOverQ12 小时前
从零学 JVM(五):垃圾回收机制——对象存活判断与 GC Roots
jvm
aifannihao12 小时前
AI 学习第 14 课:CNN 训 6 轮卡在 0.5352,数据没打乱
pytorch·python·深度学习·cnn·学习路线
yuyuxun113 小时前
协同过滤的校园二手物品智能推荐系统的设计与实现 毕业设计-附源码40082
javascript·vue.js·spring boot·python·数据分析·django·课程设计
如夏倾城13 小时前
百度文心(容易被忽略的好用AI)使用方式
人工智能·python·百度·语言模型·dubbo