React中如何添加第二个onClick监听器而不覆盖第一个？

直接给元素的onclick属性赋值会覆盖之前绑定的函数——这是因为onclick本质是单一属性，每次赋值都会替换旧值。要实现多个点击函数共存，你需要用DOM标准的addEventListener方法，它支持为同一个事件添加多个监听器，不会互相覆盖。

针对你的场景的代码示例 #

• 第一个条件满足时，添加第一个点击函数：

ref.current.addEventListener('click', function1);

• 第二个条件满足时，添加第二个点击函数：

ref.current.addEventListener('click', function2);

点击元素时，function1和function2会按你添加的顺序依次执行，不会互相覆盖。

你之前的写法为什么无效？ #

逐个拆解问题：

1. 第一种写法：

ref.current.onclick = ()=> {ref.current.onclick, function2()}

这里的ref.current.onclick只是引用了旧函数，但没有执行它，逗号表达式最终只会执行function2()，相当于直接把点击事件替换成了只执行function2，旧函数完全没被调用。

2. 第二种写法：

ref.current.onclick = ()=> {ref.current.onclick(), function2()}

当你把新函数赋值给onclick后，在新函数里调用ref.current.onclick()，其实就是调用这个新函数本身，会导致无限递归，浏览器会直接报错终止执行。

3. 第三种写法：

ref.current.onclick = ()=> {()=>ref.current.onclick(), function2()}

里面的()=>ref.current.onclick()是一个未执行的箭头函数，实际代码只执行了function2()，旧函数根本没触发。

额外提醒：移除监听器的注意事项 #

如果之后需要移除某个绑定的点击函数，一定要保存原函数的引用，不能直接传匿名函数，比如：

// 添加时保存函数引用
const handleClick1 = function1;
ref.current.addEventListener('click', handleClick1);

// 后续需要移除时
ref.current.removeEventListener('click', handleClick1);

内容的提问来源于stack exchange，提问作者Roman