React——点击事件函数调用问题

问题

js 复制代码
<MessageOutlined 
onClick={handleIconClick(test_task_id,test_run_id)} 
style={{ width: 36 ,color: '#3875f6', filter: 'brightness(1.5)'}} />

直接在onClick属性中调用函数并传递参数的语法会有问题。

在JSX中如果想要在事件处理器(如onClick)中传递额外的参数,通常需要使用箭头函数来封装它。

否则,函数将在组件渲染时被立即执行,而不是作为实际点击事件的响应。

正确的做法可能像这样:

jsx 复制代码
<MessageOutlined
  onClick={() => handleIconClick(test_task_id, test_run_id)}
  style={{ width: 36, color: '#3875f6', filter: 'brightness(1.5)' }}
/>

当你使用箭头函数时,handleIconClick 将不会在组件渲染时执行,而只在MessageOutlined组件被点击时执行。

可以看一下官网链接
React响应事件

相关推荐
小白变怪兽1 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头1 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机3 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人3 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景4 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui