React中如何在按钮onClick事件中触发两个函数？

你不需要给按钮绑定两个onClick事件，只需要把切换页面和设置激活状态的逻辑合并到同一个处理函数里即可，具体实现如下：

1. 合并状态处理逻辑 #

首先保留你的两个状态变量，然后编写一个统一的点击处理函数，同时更新页面状态和激活按钮状态：

import { useState } from 'react';

const YourComponent = () => {
  const [page, setPage] = useState("FirstFrame");
  const [activeButton, setActiveButton] = useState(0); // 默认第一个按钮为激活状态

  // 统一处理点击事件：同时设置激活按钮和切换页面
  const handleButtonClick = (index, targetPage) => {
    setActiveButton(index);
    setPage(targetPage);
  };

  return (
    <div className="sidebar">
      {/* 第一个按钮 */}
      <button
        onClick={() => handleButtonClick(0, "FirstFrame")}
        className={activeButton === 0 ? 'activeBTN' : ''}
      >
        第一页
      </button>

      {/* 第二个按钮示例 */}
      <button
        onClick={() => handleButtonClick(1, "SecondFrame")}
        className={activeButton === 1 ? 'activeBTN' : ''}
      >
        第二页
      </button>

      {/* 右侧iframe区域 */}
      <iframe src={`/${page}`} title={page} />
    </div>
  );
};

2. 批量按钮优化（可选） #

如果侧边栏按钮数量较多，建议用数组循环渲染，避免重复代码：

import { useState } from 'react';

const YourComponent = () => {
  const [page, setPage] = useState("FirstFrame");
  const [activeButton, setActiveButton] = useState(0);

  const handleButtonClick = (index, targetPage) => {
    setActiveButton(index);
    setPage(targetPage);
  };

  // 定义按钮配置数组
  const sidebarButtons = [
    { label: "第一页", page: "FirstFrame" },
    { label: "第二页", page: "SecondFrame" },
    { label: "第三页", page: "ThirdFrame" }
  ];

  return (
    <div className="sidebar">
      {sidebarButtons.map((btn, index) => (
        <button
          key={index}
          onClick={() => handleButtonClick(index, btn.page)}
          className={activeButton === index ? 'activeBTN' : ''}
        >
          {btn.label}
        </button>
      ))}

      <iframe src={`/${page}`} title={page} />
    </div>
  );
};

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