如何在React Tabs内容内通过按钮实现标签页切换？

要实现点击标签页内容里的按钮切换到另一标签页，核心是把Tabs改成受控组件，通过状态管理当前激活的标签，再给按钮绑定切换状态的事件即可。

完整实现代码 #

import { useState } from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

export default function ControlledTabs() {
  // 维护当前激活的标签索引
  const [activeTab, setActiveTab] = useState(0);

  // 切换标签的回调函数
  const handleTabChange = (event, newValue) => {
    setActiveTab(newValue);
  };

  return (
    <div>
      <Tabs value={activeTab} onChange={handleTabChange}>
        <Tab label="Tab1" />
        <Tab label="Tab2" />
      </Tabs>
      {/* Tab1 内容区域 */}
      {activeTab === 0 && (
        <div>
          Tab1 Content
          {/* 点击切换到Tab2 */}
          <button onClick={() => setActiveTab(1)}>切换到Tab2</button>
        </div>
      )}
      {/* Tab2 内容区域 */}
      {activeTab === 1 && (
        <div>
          Tab2 Content
          {/* 点击切换到Tab1 */}
          <button onClick={() => setActiveTab(0)}>切换到Tab1</button>
        </div>
      )}
    </div>
  );
}

关键实现点 #

• 受控组件设置：给Tabs组件添加value（绑定当前激活标签的状态）和onChange（状态更新回调），让Tabs的状态完全由我们的state控制。
• 按钮切换逻辑：在每个Tab的内容按钮上绑定onClick事件，直接调用setActiveTab更新激活标签的索引，就能触发标签切换。
• 内容渲染：根据activeTab的值判断渲染对应标签的内容，确保内容和激活标签同步。

内容的提问来源于stack exchange，提问作者B L Praveen