如何在ReactJS中同时触发两个按钮的点击事件？

嘿，这个需求其实挺常见的，我来给你分享几种实用的实现方式，分React和原生JS两种场景来说，你可以根据自己的项目情况选择：

React 场景 #

方法1：使用 useRef 获取DOM元素并模拟点击 #

这种方式适合你需要真正触发第二个按钮的DOM点击事件（比如按钮上有原生行为或者第三方库绑定的事件）的情况：

import { useRef } from 'react';

function ButtonDemo() {
  // 创建一个ref来引用第二个按钮的DOM节点
  const secondButtonRef = useRef(null);

  const handleFirstButtonClick = () => {
    console.log('第一个按钮被点击啦');
    // 调用第二个按钮的原生click方法，模拟点击
    secondButtonRef.current?.click();
  };

  const handleSecondButtonClick = () => {
    console.log('第二个按钮的点击事件被触发了');
  };

  return (
    <div>
      <button onClick={handleFirstButtonClick}>Click me</button>
      {/* 把ref绑定到第二个按钮上 */}
      <button ref={secondButtonRef} onClick={handleSecondButtonClick}>Click me</button>
    </div>
  );
}

• 解释：useRef 用来获取React组件渲染后的DOM节点，current 属性就是对应的DOM元素；
• 用 ?. 可选链操作符是为了避免组件初始化阶段ref还未挂载到DOM上时出现报错；
• 如果是类组件，可以用 createRef() 代替 useRef，用法类似。

方法2：抽取共享逻辑，直接调用函数（更推荐） #

如果第二个按钮的点击逻辑是你自己写的，这种方式更符合React的数据驱动思想，不需要操作DOM，更优雅：

function ButtonDemo() {
  // 把第二个按钮的逻辑抽成独立函数
  const handleSecondButtonLogic = () => {
    console.log('第二个按钮的业务逻辑执行了');
    // 这里可以放第二个按钮点击后的所有操作
  };

  const handleFirstButtonClick = () => {
    console.log('第一个按钮被点击啦');
    // 直接调用第二个按钮的逻辑函数
    handleSecondButtonLogic();
  };

  return (
    <div>
      <button onClick={handleFirstButtonClick}>Click me</button>
      <button onClick={handleSecondButtonLogic}>Click me</button>
    </div>
  );
}

这种方式的好处是：逻辑集中维护，以后修改第二个按钮的行为时，只需要改这一个函数即可，不用关心DOM操作。

原生JS 场景 #

如果是纯HTML+JS的环境，直接获取DOM元素调用click()方法就行：

<button id="firstBtn">Click me</button>
<button id="secondBtn">Click me</button>

<script>
  const firstBtn = document.getElementById('firstBtn');
  const secondBtn = document.getElementById('secondBtn');

  firstBtn.addEventListener('click', () => {
    console.log('第一个按钮被点击');
    // 触发第二个按钮的点击
    secondBtn.click();
  });

  secondBtn.addEventListener('click', () => {
    console.log('第二个按钮的点击事件触发');
  });
</script>

注意事项 #

• 如果第二个按钮是disabled状态，直接调用click()方法可能不会生效，这时候需要先移除disabled属性（比如secondBtn.disabled = false）再调用，或者调整你的业务逻辑；
• 如果你用的是其他框架（比如Vue），思路类似：要么获取DOM元素模拟点击，要么抽取共享方法直接调用。

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