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

相关推荐
古一|30 分钟前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda732 分钟前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH44 分钟前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390411 小时前
flutter 仿商场_首页
前端
少卿1 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>1 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
JYeontu2 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_2 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放2 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
少卿2 小时前
React Native Vector Icons 安装指南
前端·react native