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