求助：使用react-tabs实现按钮点击切换标签页功能

我们可以通过react-tabs的受控模式来实现点击按钮切换标签，同时处理最后一个标签的提交逻辑，具体实现步骤如下：

1. 核心思路 #

利用React的useState跟踪当前选中的标签索引，通过Tabs组件的selectedIndex和onSelect属性实现外部控制标签切换，同时给按钮添加逻辑：

• 点击「下一页」时，若当前是最后一个标签则执行提交操作，否则切换到下一个标签
• 点击「上一页」时，确保不会切换到负数索引的标签

2. 完整代码示例 #

import React, { useState } from 'react';
import { Tabs, TabList, TabPanel, Tab } from 'react-tabs';
import 'react-tabs/style/react-tabs.css'; // 必须导入默认样式，否则标签布局会异常

const TabWithNavigation = () => {
  // 初始化当前选中的标签索引，默认显示第一个标签
  const [currentTabIndex, setCurrentTabIndex] = useState(0);
  // 总标签数量，可根据实际添加的标签数调整
  const tabCount = 2;

  // 处理上一页按钮点击
  const goToPrevTab = () => {
    if (currentTabIndex > 0) {
      setCurrentTabIndex(prevIndex => prevIndex - 1);
    }
  };

  // 处理下一页/提交按钮点击
  const goToNextTabOrSubmit = () => {
    // 如果是最后一个标签，执行提交逻辑
    if (currentTabIndex === tabCount - 1) {
      // 这里替换成你的实际提交操作，比如表单验证、API请求等
      console.log('提交表单成功！');
      alert('提交完成');
      return;
    }
    // 否则切换到下一个标签
    setCurrentTabIndex(prevIndex => prevIndex + 1);
  };

  return (
    <div className="tab-container">
      {/* 受控模式的Tabs组件，通过currentTabIndex控制选中项 */}
      <Tabs selectedIndex={currentTabIndex} onSelect={setCurrentTabIndex}>
        <TabList>
          <Tab>自定义标签1</Tab>
          <Tab>提交页</Tab>
        </TabList>
        <TabPanel>
          <h3>面板1内容</h3>
          <p>这里可以放置第一步的表单或信息</p>
        </TabPanel>
        <TabPanel>
          <h3>确认提交</h3>
          <p>请检查所有信息是否正确，点击下方按钮提交</p>
        </TabPanel>
      </Tabs>

      {/* 切换按钮组 */}
      <div style={{ marginTop: '20px', gap: '10px', display: 'flex' }}>
        {/* 当在第一个标签时，禁用上一页按钮 */}
        <button onClick={goToPrevTab} disabled={currentTabIndex === 0}>
          上一页
        </button>
        {/* 根据当前标签动态修改按钮文字 */}
        <button onClick={goToNextTabOrSubmit}>
          {currentTabIndex === tabCount - 1 ? '提交' : '下一页'}
        </button>
      </div>
    </div>
  );
};

export default TabWithNavigation;

3. 关键细节说明 #

• 受控模式：Tabs组件的selectedIndex绑定状态变量，onSelect绑定状态更新函数，这样外部按钮可以直接修改状态来切换标签。
• 提交逻辑触发：通过判断当前索引是否等于总标签数减1（最后一个标签的索引），来决定是切换标签还是执行提交。
• 用户体验优化：给上一页按钮添加禁用状态，避免无效点击；动态修改按钮文字，让用户明确当前操作。
• 样式导入：必须导入react-tabs的默认样式文件，否则标签的基础布局和选中状态样式会丢失。

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