当前位置: 首页 > article >正文

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

问题

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

直接在onClick属性中调用函数并传递参数的语法会有问题。
在JSX中如果想要在事件处理器(如onClick)中传递额外的参数,通常需要使用箭头函数来封装它。
否则,函数将在组件渲染时被立即执行,而不是作为实际点击事件的响应。
正确的做法可能像这样:

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

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

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


http://www.kler.cn/news/313176.html

相关文章:

  • Gradio离线部署到内网,资源加载失败问题(Gradio离线部署问题解决方法)
  • docker搭建个人网盘,支持多种格式,还能画图,一键部署
  • Matlab可视化│常用绘图全家桶
  • HTTP中的301、302实现重定向
  • ActivityManagerService 分发广播(6)
  • Vue3:reactive丢失响应式,数据有更新但表单没有更新
  • gin配置swagger文档
  • 树与图的深度优先遍历(dfs的图论中的应用)
  • 【CPP】类与继承
  • [原创]全新安装最新版Delphi 12.2之前, 如何正确卸载旧版Delphi 12.1?
  • 谈对象第二弹: C++类和对象(中)
  • SQLiteHelper
  • Java:List<String> 转换List<BigDecimal> 并求和
  • Hadoop-MapReduce的 原理 | 块和片 | Shuffle 过程 | Combiner
  • go 战略
  • Observability:构建下一代托管接入服务
  • Linux文件IO(四)-返回错误处理与errno详解
  • 【数据结构与算法】LeetCode:双指针法
  • 基于STM32F103C8T6单片机的DDS信号源设计
  • 海洋大地测量基准与水下导航系列之二国外海底大地测量基准和海底观测网络发展现状(上)
  • mac中git操作账号的删除
  • 【linux】4张卡,坏了1张,怎么办?
  • ActivityManagerService Activity的启动流程(2)
  • Windows10、CentOS Stream9 环境下安装kafka_2.12-3.6.2记录
  • Oracle数据库pl/sql显式抛出异常
  • Python 项目实践:文件批量处理
  • 软硬件项目运维方案(Doc原件完整版套用)
  • CSP-CCF★★★201909-2小明种苹果(续)★★★
  • 【Linux】:信号的保存和信号处理
  • 【C++掌中宝】深入解析C++命名空间:有效管理代码的利器