De la siguiente manera, se bloquea el Back cuando está en uno, y se bloquea el Next cuando está en 3, también se actualiza el estado si se clickean las tabs directamente, es decir que si se clickea directamente la 1 deshabilita Back, si se clickea la 3 deshabilita Next y si se clickea la 2, quedan los 2 botones habilitados.
Código:
<>
<h1>Prueba</h1>
<Tabs defaultTab={selectedTab.toString()}>
<TabList>
<Tab tabFor="0" onClick={() => setSelectedTab(0)}>Tab 1</Tab>
<Tab tabFor="1" onClick={() => setSelectedTab(1)}>Tab 2</Tab>
<Tab tabFor="2" onClick={() => setSelectedTab(2)}>Tab 3</Tab>
</TabList>
<TabPanel tabId="0">
<p>Tab 1 content</p>
</TabPanel>
<TabPanel tabId="1">
<p>Tab 2 content</p>
</TabPanel>
<TabPanel tabId="2">
<p>Tab 3 content</p>
</TabPanel>
</Tabs>
<Button
onClick={() => setSelectedTab((prev) => prev - 1)}
disabled={selectedTab <= 0}
>
Back
</Button>
<Button
onClick={() => setSelectedTab((prev) => prev + 1)}
disabled={selectedTab >= 2}
>
Next
</Button>
</>
Adjunto otro componente completo, con una función más.
function TabsComponent() {
const [selectedTab, setSelectedTab] = useState(0);
const goTab = (numberOfTab) => {
setSelectedTab(numberOfTab);
};
return (
<>
<h1>Prueba</h1>
<Tabs defaultTab={selectedTab.toString()}>
<TabList>
<Tab tabFor="0" onClick={() => goTab(0)}>
Tab 1
</Tab>
<Tab tabFor="1" onClick={() => goTab(1)}>
Tab 2
</Tab>
<Tab tabFor="2" onClick={() => goTab(2)}>
Tab 3
</Tab>
</TabList>
<TabPanel tabId="0">
<p>Tab 1 content</p>
</TabPanel>
<TabPanel tabId="1">
<p>Tab 2 content</p>
</TabPanel>
<TabPanel tabId="2">
<p>Tab 3 content</p>
</TabPanel>
</Tabs>
<Button onClick={() => goTab(selectedTab-1)} disabled={selectedTab <= 0}>
Back
</Button>
<Button onClick={() => goTab(selectedTab+1)} disabled={selectedTab >= 2}>
Next
</Button>
</>
);
}
export default TabsComponent;
Agrego componente completo, haciendo las tabs dinámicas desde un array de objetos.
import { useState } from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-web-tabs";
import { Button } from "react-bootstrap";
function TabsComponent() {
const [selectedTab, setSelectedTab] = useState(0);
const tabsList = [
{ tabID: 0, tabName: "Tab 1", tabContent: "Tab 1 Content" },
{ tabID: 1, tabName: "Tab 2", tabContent: "Tab 2 Content" },
{ tabID: 2, tabName: "Tab 3", tabContent: "Tab 3 Content" },
{ tabID: 3, tabName: "Tab 4", tabContent: "Tab 4 Content" },
{ tabID: 4, tabName: "Tab 5", tabContent: "Tab 5 Content" },
];
const goTab = (numberOfTab) => {
setSelectedTab(numberOfTab);
};
return (
<>
<h1>Prueba</h1>
<Tabs defaultTab={selectedTab}>
<TabList>
{tabsList.map((tab) => {
return (
<Tab tabFor={tab.tabID} onClick={() => goTab(tab.tabID)}>
{tab.tabName}
</Tab>
);
})}
</TabList>
{tabsList.map((tab) => {
return (
<TabPanel tabId={tab.tabID}>
<p>{tab.tabContent}</p>
</TabPanel>
);
})}
</Tabs>
<Button
onClick={() => goTab(selectedTab - 1)}
disabled={selectedTab <= 0}
>
Back
</Button>
<Button
onClick={() => goTab(selectedTab + 1)}
disabled={selectedTab >= tabsList.length-1}
>
Next
</Button>
</>
);
}
export default TabsComponent;