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

相关推荐
南城巷陌3 分钟前
node.js实现自定义npm包并发布
前端·javascript·npm·node.js·npm包
爱学英语的程序员25 分钟前
前端面试题23 | 使用require和import引入的资源有什么区别?
前端
程序视点39 分钟前
Parallax.js:让智能设备视差效果更智能、更自然
前端·javascript·ecmascript
yqcoder2 小时前
vite-plugin-electron 库作用
服务器·前端·electron
圈圈的熊3 小时前
vue2 和 vue3的区别
前端·javascript·vue.js
Kika写代码3 小时前
【基于轻量型架构的WEB开发】课程 作业4 AOP
java·前端·架构
jlting1956 小时前
SparkSql读取数据的方式
javascript·ajax·spark
前端与小赵6 小时前
关于 AJAX 与 Promise
前端·ajax·okhttp·promise
啊·贤6 小时前
展开运算符 (...):这是 JavaScript 中的一个语法,用于将数组或对象展开到另一个数组或对象中。
前端·javascript·vue.js
硬汉嵌入式6 小时前
《安富莱嵌入式周报》第345期:开源蓝牙游戏手柄,USB3.0 HUB带电压电流测量,LCR电桥前端模拟,开源微型赛车,RF信号扫描仪,开源无线电收发器
前端·游戏·开源