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

news/2024/9/25 16:07:39/

问题

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

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

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

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

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


http://www.ppmy.cn/news/1530357.html

相关文章

Git clone远程仓库没有其他分支的问题

在使用Git克隆&#xff08;Git clone&#xff09;时&#xff0c;可能遇到分支不全的问题。有以下几种可能的原因和解决方法&#xff1a; 未将所有分支克隆下来&#xff1a;默认情况下&#xff0c;Git只会克隆远程仓库的主分支。如果您想要克隆其他分支&#xff0c;可以使用以下…

uniapp组件封装和父子组件间通讯的介绍和详细案例

Uniapp 是一个使用 Vue.js 开发跨平台应用的前端框架&#xff0c;组件封装和父子组件间通讯是其重要的特性之一。 一、组件封装 为什么要封装组件 提高代码的可维护性和可复用性。将特定功能封装成独立的组件&#xff0c;可以在不同的页面或项目中重复使用&#xff0c;减少代码…

让C#程序在linux环境运行

今晚花一些时间&#xff0c;总结net程序如何在linux环境运行的一些技术路线。 1、采用.Net Core框架 NET Core 使用了 .NET Core Runtime&#xff0c;它可以在 Windows、Linux 和 macOS 等多个操作系统上运行。可以采用Visual Studio生成Linux版本的dll。 在Linux系统中&…

C++的哲学思想

C的哲学思想 文章目录 C的哲学思想&#x1f4a1;前言&#x1f4a1;C的哲学思想☁️C底层不应该基于任何其他语言&#xff08;汇编语言除外&#xff09;☁️只为使用的东西付费&#xff08;不需要为没有使用到的语言特性付费&#xff09;☁️以低成本提供高级抽象&#xff08;更…

前端框架对比与选择指南

在现代 web 开发中&#xff0c;前端框架的选择对项目的成功与开发效率至关重要。本文将对当前流行的前端框架进行深入对比&#xff0c;帮助开发者在 Angular、React 和 Vue.js 中做出明智的选择。更多内容&#xff0c;请查阅 1. 框架概述 1.1 Angular Angular 是由谷歌开发的…

Angular面试题五

一、请解释Angular中的管道是什么&#xff0c;并列举几个内置的管道。 Angular中的管道&#xff08;Pipe&#xff09;是一种强大的工具&#xff0c;用于在Angular模板中处理和转换数据&#xff0c;并将其呈现给用户。管道可以将输入数据&#xff08;如字符串、数字、日期等&…

快速订餐:Spring Boot 点餐系统

第二章关键技术的研究 2.1相关技术 网上点餐系统是在Java MySQL开发环境的基础上开发的。Java是一种服务器端脚本语言&#xff0c;易于学习&#xff0c;实用且面向用户。全球超过35&#xff05;的Java驱动的互联网站点使用Java。MySQL是一个数据库管理系统&#xff0c;因为它的…

视频汇聚EasyCVR视频监控平台调取接口提示“认证过期”是什么原因?

视频汇聚EasyCVR视频监控平台&#xff0c;作为一款智能视频监控综合管理平台&#xff0c;凭借其强大的视频融合汇聚能力和灵活的视频能力&#xff0c;在各行各业的应用中发挥着越来越重要的作用。EasyCVR平台具备强大的拓展性和灵活性&#xff0c;支持多种视频流的外部分发&…