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

news2024/9/22 1:33:36

问题

<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.coloradmin.cn/o/2153836.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

九芯电子革新健康检测!语音播报血压计ic芯片解决方案

血压计&#xff0c;可测量血压并将读数显示在屏幕上。为了提高老年人和视障人士的可用性&#xff0c;现代电子语音血压计已经开发出来&#xff0c;可提供当前血压读数的听觉反馈。这是通过集成语音芯片来实现的&#xff0c;该芯片将测量结果发声给用户。 &#xff08;一&#x…

Java免税购物商城:Spring Boot技术实现

第二章 系统开发关键技术 2.1 JAVA技术 Java主要采用CORBA技术和安全模型&#xff0c;可以在互联网应用的数据保护。它还提供了对EJB&#xff08;Enterrise JavaBeans&#xff09;的全面支持&#xff0c;java servlet AI&#xff0c;JS&#xff08;java server ages&#xff09…

《使用 LangChain 进行大模型应用开发》学习笔记(四)

前言 本文是 Harrison Chase &#xff08;LangChain 创建者&#xff09;和吴恩达&#xff08;Andrew Ng&#xff09;的视频课程《LangChain for LLM Application Development》&#xff08;使用 LangChain 进行大模型应用开发&#xff09;的学习笔记。由于原课程为全英文视频课…

银河麒麟桌面操作系统V10(SP1)离线升级SSH(OpenSSH)服务

目录 前言 准备工作 准备与目标服务器相同版本的操作系统 准备编译依赖包 下载OpenSSL源码包 下载OpenSSH源码包 升级OpenSSH服务 查看当前版本信息 安装编译依赖包 安装OpenSSL 安装OpenSSH 前言 OpenSSH是一个广泛使用的开源SSH(安全壳)协议的实现,它提供了安…

01-ZYNQ linux开发环境安装,基于Petalinux2023.2和Vitis2023.2

TFTP 服务器配置 安装安装 tftp-hpa 和 tftpd-hpa &#xff1b;tftp-hpa 客户端&#xff0c;tftpd-hpa 为服务端 #安装 tftp-hpa 和 tftpd-hpa sudo apt-get install tftp-hpa tftpd-hpa配置服务器 #创建路径 mkdir -p ~/workspace/tftp-boot chmod 777 ~/workspace/tftp-b…

开放式耳机什么品牌好?2024年开放式蓝牙耳机排行榜推荐

​开放式耳机绝对是个不错的选择&#xff0c;它们长时间佩戴耳朵也不会感到疲劳&#xff0c;对耳朵的健康也很友好。虽然过去存在一些漏音的问题&#xff0c;但与它们带来的便利相比&#xff0c;这点儿小瑕疵几乎可以忽略不计。漏音可能会对他人造成干扰&#xff0c;也可能影响…

vue3(整合版)

创建第一个vue项目 1.安装node.js cmd输入node查看是否安装成功 2.vscode开启一个终端&#xff0c;配置淘宝镜像 # 修改为淘宝镜像源 npm config set registry https://registry.npmmirror.com 输入如下命令创建第一个Vue项目 3.下载依赖&#xff0c;启动项目 访问5173端口 …

年度巨献 | OpenCSG开源最大中文合成数据集Chinese Cosmopedia

01 背景 近年来&#xff0c;生成式语言模型&#xff08;GLM&#xff09;的飞速发展正在重塑人工智能领域&#xff0c;尤其是在自然语言处理、内容创作和智能客服等领域展现出巨大潜力。然而&#xff0c;大多数领先的语言模型主要依赖于英文数据集进行训练&#xff0c;中文数据…

python:给1个整数,你怎么判断是否等于2的幂次方?

最近在csdn上刷到一个比较简单的题目&#xff0c;题目要求不使用循环和递归来实现检查1个整数是否等于2的幂次方&#xff0c;题目如下&#xff1a; 题目的答案如下&#xff1a; def isPowerofTwo(n):z bin(n)[2:]print(bin(n))if z[0] ! 1:return Falsefor i in z[1:]:if i !…

NXP官方或正点原子mfgtool下载系统报错initialize the library falied error code:29

这是因为mfgtool版本或者源文件被破坏了&#xff0c;你可以重新下载一个被改过的mfgtool程序&#xff0c;我就是去原子官网重新在linux包里找了新的更迭过的mfgtool

VMware虚拟机因磁盘空间不足黑屏无法登录

在虚拟机里存储了一些文件之后&#xff0c;再打开发现进不去了&#xff0c;只有光标一直在左上角&#xff0c;登录的框都是黑的&#xff0c;具体如下&#xff1a; 明明知道登录框的存在却怎么也触碰不到它T_T &#xff0c;先说解决方法&#xff1a; 产生这个问题的原因是因为磁…

yolov5/8/9模型在COCO分割数据集上的应用【代码+数据集+python环境+GUI系统】

yolov5/8/9模型在COCO分割数据集上的应用【代码数据集python环境GUI系统】 yolov5/8/9模型在COCO分割数据集上的应用【代码数据集python环境GUI系统】 1.COCO数据集介绍 COCO数据集&#xff0c;全称为Microsoft Common Objects in Context&#xff0c;是微软于2014年出资标注的…

多态与绑定例题

答案&#xff1a; B D C 知识点&#xff1a; 多态是相同方法不同的表现&#xff0c;分为重写和重载 重写体现在父类与子类不同表现&#xff0c;主要表现为子类重现父类的方法 重载体现在同一个类中的不同表现 绑定分为动态绑定和静态绑定 动态绑定是在运行时 静态绑定是…

动态规划算法:09.路径问题_最小路径和_C++

目录 题目链接&#xff1a;LCR 099. 最小路径和 - 力扣&#xff08;LeetCode&#xff09; 一、题目解析 题目&#xff1a; 解析&#xff1a; 二、算法原理 1、状态表示 2、状态转移方程 3、初始化 dp表初始化: 特殊位置初始化&#xff1a; 4、填表顺序 5、返回值 …

【HTTP】认识 URL 和 URL encode

文章目录 认识 URLURL 基本格式**带层次的文件路径****查询字符串****片段标识符** URL encode 认识 URL 计算机中非常重要的概念&#xff0c;并不仅仅是在 HTTP 中使用。用来描述一个网络资源所处的位置&#xff0c;全称“唯一资源定位符” URI 是“唯一资源标识符“严格的说…

超越极限!Qwen2.5 助力多领域智能应用

前沿科技速递&#x1f680; 近日&#xff0c;Qwen2.5 系列重磅发布&#xff0c;成为开源语言模型领域的又一里程碑。作为一款全新的通用语言模型&#xff0c;Qwen2.5 在支持自然语言处理的基础上&#xff0c;还在编程、数学等领域进行了专项优化。Qwen2.5 模型支持长文本生成&a…

黑群晖安装教程

黑群晖&#xff08;一种非官方的群晖NAS系统安装方式&#xff09;的安装教程相对复杂&#xff0c;但按照以下步骤操作&#xff0c;可以顺利完成安装。请注意&#xff0c;由于黑群晖涉及非官方操作&#xff0c;安装过程中可能遇到各种不确定因素&#xff0c;建议具备一定的计算机…

十四、运算放大电路

运算放大电路 1、理想运算放大器的概念。运放的输入端虚拟短路、虚拟断路之间的区别; 2、反相输入方式的运放电路的主要用途&#xff0c;以及输入电压与输出电压信号的相位 3、同相输入方式下的增益表达式(输入阻抗、输出阻抗)

英语<数词>

1.基数 one two three 整数 1 2 3 小数 1.1 2.2 3.2 分数 分子用基数&#xff0c;分母用序数 例子 1/3 one third 分子>1 2/3 two thirds 百分数 2.序数 first second

【软考】传输层协议TCP与UDP

目录 1. TCP1.1 说明1.2 三次握手 2. UDP3. 例题3.1 例题1 1. TCP 1.1 说明 1.TCP(Transmission Control Protocol&#xff0c;传输控制协议)是整个 TCP/IP 协议族中最重要的协议之一。2.它在IP提供的不可靠数据服务的基础上为应用程序提供了一个可靠的、面向连接的、全双工的…