1

Estimados estoy haciedo un next, back a unos tabs, todo bien solo nesecito poner en disabled el button de next cuando haya llegado al ultimo item de la lista, en el caso del primer item si logro que no se active y entre el disabled, pero no logro hacer lo miso con el ultimo elemento dejo lo que probe pero no lo consigo, (no puede ser un array) los tabs puden ser x cantidad, no es un numero fijo puden crecer dinamicamente Gracias.

const ControllableTabs = () => {
  const [selectedTab, setSelectedTab] = useState(0);

  return (
    <>
      <Tabs defaultTab={selectedTab.toString()}>
        <TabList>
          <Tab tabFor="0">Tab 1</Tab>
          <Tab tabFor="1">Tab 2</Tab>
          <Tab tabFor="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(selectedTab - 1)} disabled={ selectedTab -1 }>Back</Button>
      <Button onClick={() => setSelectedTab(selectedTab + 1)} disabled={ selectedTab = 'disabled si es el ultimo elemento' }>Next</Button>
    </>
  );
}

5

2 respuestas 2

0

Como la cantidad de Tabs es pequeña, perfectamente puedes condicionar el disabled de esta manera

disabled={selectedTab >= 2}

El límite debería ser siempre uno menos que la cantidad total de tabs, ya que estas inicializando el state en 0.

Una mejor forma de controlar el habilitar/deshabilitar sin tener que colocar en duro el valor, sería crear un listado con la cantidad de tabs y recorrerlo en tu componente.

Por ejemplo

const [data, setData] = useState([{...}, {...}, {...}])

<>
  <Tabs defaultTab={selectedTab.toString()}>
    <TabList>
      {data.length > 0 && data.map((item, index) => <Tab tabFor={index}>{`Tab ${index + 1}`}</Tab>)}
    </TabList>

    {data.length > 0 && data.map((item, index) => (
      <TabPanel key={index} tabId={index}>
        <p>{item.name}</p>
      </TabPanel>
    ))}
  </Tabs>
            
  <button onClick={() => setSelectedTab(selectedTab - 1)} disabled={selectedTab <= 0}>
    Back
  </button>
  
  <button onClick={() => setSelectedTab(selectedTab + 1)} disabled={selectedTab > data.length - 1}>
    Next
  </button>
</>

Suponiendo que tu state data ya esta con información, sería sólo validar que el tab seleccionado sea mayor a la cantidad de registros - 1, ya que partimos contando desde 0.

Acá te dejo el ejemplo completo para tu análisis.

Nos comentas si tienes dudas

2
  • si claro el ejemplo tiene 3 tabs, pero en teoria eso tabs pudes ser x cantidad, pueden aumentar sin saber un numero extacto, solo deberia detectar cuando es el ultimo y deshablitar el boton para que ya no avanze espero se entienda. Commented el 16 dic. 2021 a las 3:33
  • @SixtoMujica Edite la respuesta con una casuística ficticia. Sin embargo, considera que el problema inicial de tu pregunta (deshabilitar botón) ya se abarcó ;) Commented el 16 dic. 2021 a las 20:09
0

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;
3
  • si claro el ejemplo tiene 3 tabs, pero en teoria eso tabs pudes ser x cantidad, pueden aumentar sin saber un numero extacto, solo deberia detectar cuando es el ultimo y deshablitar el boton para que ya no avanze espero se entienda. Commented el 16 dic. 2021 a las 4:22
  • En ese caso los Tabs se generarían de forma dinámica, tendrías quizás un array con la info de cada data, entonces tendrías que tener en cada uno el valor para poner en tabFor y en los setters, que lo harías dinámico tambien con una variable. Y en la comparación donde hacemos >= 2, haríamos >= arrayDeTabs.lenght.. Con eso sería sufiicente. Incluso podrías hace que el tabID, tabFor y los valores para los setters sean el índice de cada elemento en el array, o un contador y un contador++ en cada iteración. Commented el 16 dic. 2021 a las 4:27
  • Agregué al final de la respuesta el componente completo, este genera las tabs dinámicas desde un array de objetos, las genera automáticamente, y se anulan los botones back o next en función de la posición de la cantidad de tabs generadas. Commented el 16 dic. 2021 a las 20:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.