当前位置: 首页 > 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/a/313176.html

相关文章:

  • opencv常用api
  • AI大模型开发架构设计(18)——基于大模型构建企业知识库案例实战
  • 向日葵软件Windows系统连接苹果系统(MacOS)的无反应问题解决办法
  • 提取神经网络数学表达式
  • C++面试基础知识:排序算法 C++实现
  • C获取程序名称的方法
  • 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信号源设计
  • 海洋大地测量基准与水下导航系列之二国外海底大地测量基准和海底观测网络发展现状(上)