如何在 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 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西

相关推荐
wltx16889 小时前
谷歌SEO如何做插床优化?
大数据·人工智能·python
2301_7815714210 小时前
JavaScript中Object-getOwnPropertySymbols获取方法
jvm·数据库·python
倒霉熊dd10 小时前
Python学习(第一部分 语法与数据结构/核心基础)
大数据·python·学习·pip
jump_jump10 小时前
Drizzle 凭什么贴着 Go 跑——从设计哲学到热路径源码
数据库·性能优化·orm
jay神10 小时前
基于SpringBoot的宠物生命周期信息管理系统
java·数据库·spring boot·后端·web开发·宠物·管理系统
仅此,10 小时前
deep agent整合 DeepSeek 记录
python·langchain·agent·deep agent sdk
苍煜11 小时前
生产环境 JVM 参数实战计算指南
jvm
秋911 小时前
MySQL 8.0.46 与 MySQL 9.7.0在sql语句方面的区别并举例说明
数据库·sql·mysql
一只数据集11 小时前
NVIDIA Nemotron AIQ Agentic Safety Dataset:面向企业级智能体系统的安全与防护评估数据集全面解析
网络·数据库·安全
ftpeak11 小时前
AI开发之LangGraph教程6~自定义状态 (Custom State)
python·ai·langchain·langgraph