0

Criei duas telas, uma possui uma tabela usando o componente react-table que possui tres colunas: codigo, grupo e um botão editar para cada linha. A outra tela possui uma box com duas caixas de texto onde, ao clicar no botão editar eu vou para a tela de edição e quero que nas caixas de texto renderize o código e o nome do grupo respectivos daquela linha onde eu cliquei. Eu ja consigo imprimir no console o codigo e grupo especificos de cada linha separadamente ao clicar no botão mas não sei como eu levo eles para outra tela e os apresento dentro da caixa de texto na renderização, como posso fazer isso?

E puxo o nome do codigo e grupo assim:

Cell: (props)=> (
             <Link to='EditarGrupo'><button className='modaleditar btn btn-info'
                    onClick={() => {
                      const nome_cdgrupo = props.original.Cdgrupo;
                      const nome_grupo = props.original.Grupos;

                         console.log("Código:", nome_cdgrupo);
                         console.log("Grupo:", nome_grupo);

                      }}>

                      Editar

                      </button>
                      </Link> 

Quero mandar o nome_grupo e nome_cdgrupo para esses inputs em outra tela:

<input type='text'  className='Cdgrupo_edit' defaultValue={this.props.Cdgrupo} onChange={this.handleChangeCdgrupo}></input>
 <input type='text' className='Grupos' defaultValue={this.state.Grupo} onChange={this.handleChangeGrupos}></input>

As informações da tabela vem de uma api, em JSON.

Essas são as imagens de como está criada a tabela e a box, para onde eu quero levar o codigo e grupo para essas caixas de texto, cada uma tela diferente:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

2
  • Problema oculto não explicou o que realmente faz e como tem essas informações. Complicado entender o seu problema poderia explicar da onde vem essas informações
    – novic
    10/10/2019 às 14:57
  • @VirgilioNovic Perdão se não fui claro, ainda sou bem iniciante. Tentei melhorar a minha pergunta e coloquei imagens mostrando o que estou fazendo. 10/10/2019 às 15:09

1 Resposta 1

2

Você deve criar um componente para seu botão Editar e dessa forma passar os valores como props. O componente <Editar/> será responsável por renderizar os inputs, enquanto na célula da tabela você substituirá tudo pela tag do componente e passará os valores do Grupo e CdGrupo como props, assim:

Cell: (props)=> (<Editar Grupo={props.original.Grupo} CdGrupo={props.original.Cdgrupo}/>)

Simulei os botões Editar renderizando os inputs que recebem as props nesse link: https://react-gzazty.stackblitz.io, mas basicamente o código dele é uma abstração do que você colocou direto na célula da tabela:

import React from 'react';

const Editar = (props) => {
  const {
    Cdgrupo,
    Grupo
  } = props;

  return (
    <>
    <input type='text' defaultValue={Cdgrupo}></input>
    <input type='text' defaultValue={Grupos}></input>
    </>
  );
};

export default Editar;

Percebi pela classe que você está utilizando uma modal. Você pode também implementar um comportamento de modal utilizando o pacote https://www.npmjs.com/package/react-modal. Utilizando esse pacote, você terá que deixar de usar o Link e passará a renderizar o conteúdo diretamente em cima da tabela. Dê uma olhada e avalie se vale a pena para você.

Espero ter ajudado.

3
  • Obrigado pela resposta C.Pertile! Entendi a sua resposta mas fiquei com uma duvida, no caso se eu transformar o botão Editar em componente ele perde a função de botão? No caso quando clicado me manda para outra tela. 17/10/2019 às 14:30
  • Quando a modal, foi um erro meu. Eu ia usar mas acabei desistindo e não troquei o nome da classe do botão rsrs. Mas obrigado pela dica mesmo assim! 17/10/2019 às 14:55
  • Você pode transferir toda a função do botão para seu componente. Ele pode ser <BotaoEditar/>, ou qualquer coisa que você quiser. Componentes são funções javascript que renderizam html. Aqui no site do React tem uma explicação bem legal sobre isso que acho que pode clarear mais pra ti.
    – C. Pertile
    21/10/2019 às 23:01

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 .