如何在 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 渲染机制的强制要求。当你这样写:<button onClick={window.href='https://github.com/'} className="btn btn-github"> Visit GitHub</button>React 实际上会在组件渲染时立即执行 window.href='https://github.com/'(注意:此处应为 window.location.href,window.href 并不存在),并将赋值结果(即字符串 'https://github.com/')作为 onClick 的值传入。这违反了 React 的事件处理规范,因此抛出错误:Expected onclick listener to be a function, instead got a value of string type.? 正确写法是将事件逻辑封装为一个函数,并通过箭头函数(或具名函数)传递给 onClick: Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西

相关推荐
EQUINOX18 小时前
【论文阅读】| MoCo精读
论文阅读·人工智能·python·深度学习·机器学习
哥是强混9 小时前
Means:基于 .NET 10 打造的开源自部署 S3 兼容对象存储服务
网络·数据库·.net
ffqws_9 小时前
redis面试:如何保证双写一致
数据库·redis·缓存
水无痕simon9 小时前
6 数据库同义词
数据库
用户8356290780519 小时前
使用 Python 自动化 Excel 公式和函数:完整指南
后端·python
敲代码的嘎仔9 小时前
实习日志day6--实习日志day6--title命名规范化&businessType纠正&补充缺失的@Log注解&报警与通信模块补充&产出阶段总结文档
java·开发语言·人工智能·git·python·实习·大二
江华森10 小时前
Python 实现高德地图找房(一):环境搭建与数据爬虫
开发语言·爬虫·python
杜子不疼.10 小时前
【Qt初识】信号槽(三):机制意义、断开连接与 Lambda 表达式
开发语言·数据库·qt
VIP_CQCRE10 小时前
用 Ace Data Cloud 快速接入 OpenAI Chat Completions:对话、流式、多轮和多模态一篇打通
python·ai·openai·api·教程
AOwhisky10 小时前
Python 学习笔记(第三期)——流程控制:条件判断与循环结构
运维·笔记·python·学习·云原生·流程控制·循环