React Bootstrap 5 - 带有 Previous Next 按钮的 Tabs 组件

Question

我有一个使用React创建步骤组件的需求Bootstrap 5.这里我使用Tabs组件来实现。如何添加Previous和Next按钮来控制Tabs？功能是在条件下使用 Next 按钮启用下一个选项卡，而 Previous 按钮仅用于访问上一个选项卡。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Tabs, Tab, Row, Button, Col, Container } from "react-bootstrap";
import Home from './Components/TabComponents/Home';
import Profile from './Components/TabComponents/Profile';
import Contact from './Components/TabComponents/Contact';

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col>
            <Tabs defaultActiveKey={"home"} id="controlled-tab-example">
              <Tab eventKey="home" title="Home" >
                <Home />
              </Tab>
              <Tab eventKey="profile" title="Profile" disabled>
                <Profile />
              </Tab>
              <Tab eventKey="contact" title="Contacts" disabled>
                <Contact />
              </Tab>
            </Tabs>
          </Col>
        </Row>
        <Button className='success'>Prev</Button>
        <Button className='success'>Next</Button>
      </Container>
    </>
  );
}

Answer 1

您也可以将数字传递给 eventKeys，而不仅仅是字符串。单击按钮，然后只需增加或减少数字。还为选项卡和按钮提供适当的禁用状态：

export default function App() {
  const [currentTab, setCurrentTab] = React.useState(0);
  return (
    <Container>
      <Row>
        <Col>
          <Tabs activeKey={currentTab} id="controlled-tab-example">
            <Tab eventKey={0} title="Home" disabled={currentTab !== 0}>
              Home
            </Tab>
            <Tab eventKey={1} title="Profile" disabled={currentTab !== 1}>
              Profile
            </Tab>
            <Tab eventKey={2} title="Contacts" disabled={currentTab !== 2}>
              Contacts
            </Tab>
          </Tabs>
        </Col>
      </Row>
      <Stack gap={3} direction="horizontal" className="mt-3">
        <Button
          className="success"
          disabled={currentTab === 0}
          onClick={() => setCurrentTab((prev) => prev - 1)}
        >
          Prev
        </Button>
        <Button
          className="success"
          disabled={currentTab === 2}
          onClick={() => setCurrentTab((prev) => prev + 1)}
        >
          Next
        </Button>
      </Stack>
      <p>Current tab index is {currentTab}</p>
    </Container>
  );
}

https://codesandbox.io/s/unruffled-estrela-ebtioq

React Bootstrap 5 - 带有 Previous Next 按钮的 Tabs 组件

React Bootstrap 5 - Tabs component with Previous Next Button

reactjs

react-bootstrap