如何在 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辅助编程工具

相关推荐
欢呼的太阳10 小时前
数据库设计Step by Step (10)——范式化
服务器·数据库·oracle
夜雪一千11 小时前
Python enumerate() 函数完整详解:遍历同时获取索引,告别手动计数
服务器·windows·python
喜欢的名字被抢了11 小时前
MySQL基础入门:从零理解数据库与SQL
数据库·mysql·教程
能有时光12 小时前
PyTorch KernelAgent 源码解读 ---(4)--- ExtractorAgent
人工智能·pytorch·python
_Jimmy_12 小时前
Python 协程库如何使用以及有哪些使用场景
python
aqi0012 小时前
15天学会AI应用开发(十七)使用LangGraph实现会话记忆功能
人工智能·python·大模型·ai编程·ai应用
Elastic 中国社区官方博客12 小时前
如何比较两个 Elasticsearch 索引并找出缺失的文档
大数据·运维·数据库·elasticsearch·搜索引擎
第一程序员13 小时前
Rust Agent 子进程执行:Command 之前,先定义输入和超时
python·rust·github
DLYSB_13 小时前
生命通道:如何用 HIS 医疗系统直连网络声光终端,打造“零延误”的危急值响应网关?
java·网络·数据库·报警灯
儒雅的大叔13 小时前
MySQL数据库InnoDB数据恢复工具使用总结
数据库·mysql·adb