0

Estou criando um sistema, e ao invés de colocar as 'sub categorias' de cadastros abaixo do menu, estou criando como abas, quando você clica em cada menu e então possui os demais acessos.

Exemplo: ao clicar em Cadastros, atualiza o meu conteúdo ao lado com 'abas'(Listgroup) de todos os tipos de cadastros que vou ter. Gostaria que ao selecionar estes itens(cadastro 1, cadastros 2 ... na imagem)atualizasse o conteúdo da página com os campos de formulários. Pesquisei pelo useState do react, mas não consegui entender como implementar ele nesta rotina, poderiam me ajudar?

As minhas abas, eu fiz como uma lista na horizontal, utilizando o componente do react-botstrap (Listgroup).

<ListGroup horizontal>
    <ListGroup.Item variant="info">teste 1</ListGroup.Item>
    <ListGroup.Item variant="info">teste 2</ListGroup.Item>
    <ListGroup.Item variant="info">teste 3</ListGroup.Item>
    <ListGroup.Item variant="info">teste 4</ListGroup.Item>
    <ListGroup.Item variant="info">teste 5</ListGroup.Item>
    <ListGroup.Item variant="primary">teste 6</ListGroup.Item>
</ListGroup>
 

Ao selecionar um destes itens, gostaria que atualizasse o Card.

<Card>
  <Card.Header>
    <Card.Title as="h4">Mudar o conteúdo aqui</Card.Title>
    <p className="card-category">
      Conteúdo aqui
    </p>
  </Card.Header>
  <Card.Body>
    ffff
  </Card.Body>
</Card>

Estou utilizando: NodeJs 14.15.5 React-bootstrap

inserir a descrição da imagem aqui

1 Resposta 1

-1

Há dois caminhos para resolver isso, seguir com a forma que você iniciou e usar o useState ou utilizar o componente tab do Bootstrap que já tem o comportamento mais parecido com o que você deseja.

Adicionando useState ao seu código

O useState permite que você adicione um valor ao seu componente que você pode modificar mediante ações como o click, por exemplo. Eu fiz um exemplo seguindo o seu código:

import React from 'react'
import ListGroup from 'react-bootstrap/ListGroup'
import Card from 'react-bootstrap/Card'

const counteudos = [
   'Conteudo 1',
   'Conteudo 2',
   'Conteudo 3',
   'Conteudo 4',
   'Conteudo 5',
   'Conteudo 6',
]

export default function App() {
  const [abaAtiva, setAbaAtiva] = React.useState(0)

  return (
    <React.Fragment>
      <ListGroup horizontal>
        <ListGroup.Item onClick={() => setAbaAtiva(0)} variant={abaAtiva === 0 ? 'primary' : 'info'}>teste 1</ListGroup.Item>
        <ListGroup.Item onClick={() => setAbaAtiva(1)} variant={abaAtiva === 1 ? 'primary' : 'info'}>teste 2</ListGroup.Item>
        <ListGroup.Item onClick={() => setAbaAtiva(2)} variant={abaAtiva === 2 ? 'primary' : 'info'}>teste 3</ListGroup.Item>
        <ListGroup.Item onClick={() => setAbaAtiva(3)} variant={abaAtiva === 3 ? 'primary' : 'info'}>teste 4</ListGroup.Item>
        <ListGroup.Item onClick={() => setAbaAtiva(4)} variant={abaAtiva === 4 ? 'primary' : 'info'}>teste 5</ListGroup.Item>
        <ListGroup.Item onClick={() => setAbaAtiva(5)} variant={abaAtiva === 5 ? 'primary' : 'info'}>teste 6</ListGroup.Item>
      </ListGroup>

      <Card>
        <Card.Header>
          <Card.Title as="h4">Mudar o conteúdo aqui</Card.Title>
          <p className="card-category">
            {counteudos[abaAtiva]}
          </p>
        </Card.Header>
        <Card.Body>
          ffff
        </Card.Body>
      </Card>
  </React.Fragment>
  );
}

Sandbox com esse código rodando

Solução alternativa: Tabs

Com o componente Tabs do Bootstrap é possível fazer o que você quer sem necessariamente precisar do uso de estado. O primeiro exemplo da documentação é bastante parecido com o que você deseja. O Código das Tabs ficaria algo como:

<Tabs defaultActiveKey="1">
  <Tab eventKey="1" title="test 1">
    Conteudo 1
  </Tab>
  <Tab eventKey="2" title="test 2">
    Conteudo 2
  </Tab>
  <Tab eventKey="3" title="test 3">
    Conteudo 3
  </Tab>
</Tabs>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .