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响应事件

相关推荐
易元几秒前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api几秒前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
整点可乐2 分钟前
cesium实现鹰眼图
javascript·cesium
艾小码3 分钟前
Web存储指南:彻底掌握localStorage与sessionStorage
javascript
BUG创建者15 分钟前
openlayer根据不同的状态显示不同的图层颜色
android·java·javascript
Pedantic29 分钟前
swift 日期与时间的三个结构体
前端
南方kenny29 分钟前
Mock.js:前端开发的假数据神器
前端·javascript
芹丸子29 分钟前
vue cli 创建项目一直失败
前端
鹏程十八少33 分钟前
6.android Vivo手机 指纹解锁动画 (附源码)
前端
AliciaIr33 分钟前
深入理解React Hook:useRef的底层机制与高级应用
前端·react.js