如何通过Tab内容按钮切换React-Bootstrap标签并保持状态？

我帮你定位到了问题的核心，主要是两个小细节导致了标签页切换后又跳回去的情况，咱们一步步修复：

问题分析 #

1. 表单默认提交行为未阻止：你的Save按钮放在<form>标签内，默认是type="submit"类型，点击后会触发浏览器的表单提交默认行为，导致页面刷新（或者React组件重置），这就是标签页刚切换就跳回的关键原因。
2. Tabs组件的onSelect绑定错误：你把onSelect绑定到了自定义的handleTabChange函数，但这个函数没有正确处理标签切换的参数，而且其实onSelect直接绑定setActiveTab就能实现点击标签切换的常规功能。

修复后的完整代码 #

import React, { useState } from 'react';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';

const ThreeTabbedForm = () => {
  const [activeTab, setActiveTab] = useState('shipping');
  const [shipInfo, setShipInfo] = useState('');
  const [payInfo, setPayInfo] = useState('');

  // 处理Save按钮点击，切换到下一个标签页
  const handleSaveClick = (e) => {
    // 关键：阻止表单默认提交行为，避免页面刷新
    e.preventDefault();

    // 根据当前标签页切换到下一个，用switch逻辑更清晰
    switch(activeTab) {
      case 'shipping':
        setActiveTab('payment');
        break;
      case 'payment':
        setActiveTab('order');
        break;
      default:
        // 最后一个标签页无需切换
        break;
    }
  };

  return (
    {/* 直接把onSelect绑定到setActiveTab，实现点击标签切换的常规功能 */}
    <Tabs activeKey={activeTab} onSelect={setActiveTab}>
      <Tab title="Shipping Info" eventKey="shipping" id="shipping-tab">
        <form>
          <input 
            type="text" 
            value={shipInfo} 
            placeholder="Shipping info" 
            onChange={e => setShipInfo(e.target.value)} 
            required 
          />
          <button onClick={handleSaveClick} style={{ display: 'block' }}>Save</button>
        </form>
      </Tab>
      <Tab title="Payment Info" eventKey="payment" id="payment-tab">
        <form>
          <input 
            type="text" 
            value={payInfo} 
            onChange={e => setPayInfo(e.target.value)} 
            placeholder="Payment info" 
          />
          <button onClick={handleSaveClick} style={{ display: 'block' }}>Save</button>
          <p>Shipping info: {shipInfo}</p>
        </form>
      </Tab>
      <Tab title="Order Info" eventKey="order" id="order-tab">
        {/* 最后一个标签页无提交操作，替换form为div更合理 */}
        <div>
          <h2>Order placed successfully</h2>
          <p>Shipping info: {shipInfo}</p>
          <p>Payment info: {payInfo}</p>
        </div>
      </Tab>
    </Tabs>
  );
};

export default ThreeTabbedForm;

额外优化建议（可选） #

如果想确保用户填写完信息再切换标签页，可以在切换前添加输入验证：

const handleSaveClick = (e) => {
  e.preventDefault();

  // 验证当前标签页的输入内容
  if (activeTab === 'shipping' && !shipInfo.trim()) {
    alert('请填写完整的Shipping信息');
    return;
  }
  if (activeTab === 'payment' && !payInfo.trim()) {
    alert('请填写完整的Payment信息');
    return;
  }

  // 验证通过后切换标签页
  switch(activeTab) {
    case 'shipping':
      setActiveTab('payment');
      break;
    case 'payment':
      setActiveTab('order');
      break;
    default:
      break;
  }
};

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