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

蓝莓味柯基2024-09-21 14:51

问题

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