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

相关推荐
Python私教6 小时前
Django 接口开发实测:新手还需要使用 REST 框架吗?
后端·python·django
DBA_G6 小时前
南大通用GBase HD数据平台讲解
数据库
foolishlee6 小时前
Neon wal日志处理流程
数据库
星马梦缘6 小时前
数据库 事务管理 专项作战记录
数据库
名字还没想好☜6 小时前
Python concurrent.futures 实战:用 ThreadPoolExecutor 并发处理 + as_completed 收结果
数据库·python·php·并发
爱码小白6 小时前
importlib模块
开发语言·前端·python
空杆推不起6 小时前
穿透数据库 JOIN 核心:语法分类、底层算法、生产优化与高频坑点全解析
数据库·oracle
axinawang7 小时前
第25课 for循环的应用
python
逻极7 小时前
FastAPI 实战:从入门到自动化文档,如何把API开发效率提升200%
python·api·fastapi·swagger·异步
xqqxqxxq7 小时前
MySQL 数据类型笔记
数据库·笔记·mysql