Início / coding / Perguntas / 79592791
Accepted
Tevin-was-taken
Asked: 2025-04-25 23:04:34 +0800 CST

Como usar useState para alternar entre 2 arquivos js com tabulações

  • 772

Estou trabalhando em um projeto e, ao clicar na aba, ela deveria mudar de página, mas por algum motivo não muda. Só travou na página de visão geral. Estou fazendo algo errado?

import React, {useState} from 'react';
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
import ClientOverview from '../client_dashboard/client_components/overview';
import ClientImpact from '../client_dashboard/client_components/impacts';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';


  const ClientDashContainer = props => {
  const [value, setValue] = useState('overview');

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return(
    <div style={{padding:'2%', backgroundColor:'#f5f5f5', minHeight:'95vh'}}>
        <Box>
            <FormControl style={{width:'15vw', minWidth:'fit-content'}}>
                <InputLabel id="demo-simple-select-label">Sites</InputLabel>
                <Select labelId="demo-simple-select-label" id="demo-simple-select" label="Sites">
                </Select>
            </FormControl>
        </Box>
        <Tabs defaultActiveKey="overview" className="mb-3" justify value={value} onChange={handleChange}>
            <Tab value = 'overview' eventKey="overview" title="Overview"/>
            <Tab value = 'impacts' eventKey="impacts" title="Impacts"/>
        </Tabs>

        {value === 'overview' && <ClientOverview/>}
        {value === 'impacts' && <ClientImpact/>}
    </div>
);
}

export default ClientDashContainer;
javascript

2 respostas

  1. Tente depurar sua onChangefunção, pois no React Bootstrap ela mostrará que eventKeyvocê clicou.

     const handleChange = (k) => {
    setValue(k);
    // which will give you either overview or impacts
  };

      <Tabs defaultActiveKey="overview" className="mb-3" justify value={value} onChange={handleChange}>
    <Tab value = 'overview' eventKey="overview" title="Overview"/>
    <Tab value = 'impacts' eventKey="impacts" title="Impacts"/>
  </Tabs>
    • 0
  2. Best Answer

    O Tabscomponente usa um onSelectretorno de chamada para manipular a seleção de uma aba, que recebe o valor da chave da aba. Consulte Tabsa documentação da API para obter mais detalhes.

    Atualize para usar onSelect={handleChange}e atualize handleChangepara receber a tecla tab.

    Exemplo:

    const ClientDashContainer = (props) => {
  const [value, setValue] = useState("overview");

  const handleChange = (value) => setValue(value);

  return (
    <div
      style={{ padding: "2%", backgroundColor: "#f5f5f5", minHeight: "95vh" }}
    >
      <Box>
        <FormControl style={{ width: "15vw", minWidth: "fit-content" }}>
          <InputLabel id="demo-simple-select-label">Sites</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            label="Sites"
          ></Select>
        </FormControl>
      </Box>
      <Tabs
        defaultActiveKey="overview"
        className="mb-3"
        justify
        value={value}
        onSelect={handleChange}
      >
        <Tab value="overview" eventKey="overview" title="Overview" />
        <Tab value="impacts" eventKey="impacts" title="Impacts" />
      </Tabs>

      {value === "overview" && <ClientOverview />}
      {value === "impacts" && <ClientImpact />}
    </div>
  );
};

    Sugiro também usar o TabPanecomponente para lidar com a renderização condicional do conteúdo da sua guia.

    Exemplo:

    import { Tab, Tabs, TabPane } from "react-bootstrap";

...

<Tabs
  defaultActiveKey="overview"
  className="mb-3"
  justify
  value={value} // can be removed for uncontrolled usage
  onSelect={handleChange} // can be removed for uncontrolled usage
>
  <Tab value="overview" eventKey="overview" title="Overview" />
  <Tab value="impacts" eventKey="impacts" title="Impacts" />
  <TabPane eventKey="overview">
    <ClientOverview />
  </TabPane>
  <TabPane eventKey="impacts">
    <ClientImpact />
  </TabPane>
</Tabs>

    Isso também permite que você deixe o Tabscomponente se controlar, ou seja, ele não é controlado e gerencia seu próprio estado, o valueestado e onSelecto manipulador não são necessários.

    • 0

relate perguntas