ReactJS - Tela de Update em popup não recebe dados corretos

VictorGuedes
(usa CentOS)

Enviado em 24/06/2020 - 10:21h

Bom dia Galera!

Fiz uma tela de cadastro na aplicação usando popup. Para cadastro tudo certo, pois não preciso recolher informações.
Para fazer a tela de update, precisava que quando clicasse no link "Editar" ele buscasse a linha que eu cliquei para editar, porem em todas as tentativas de resolver isso ele pegou somente a primeira linha, fora que colocando o html do popup nessa ordem, ele foi parar la no canto direito.

Segue o codigo de uma das tentativas :

// Aqui é onde faço o select com todos ativos da carteira em tabela, e a DIV popup é exibida quando clico no link Editar. Não sei se é o lugar correto mas foi o mais proximo que consegui de fazer funcionar. Porem como ja explicado sempre pega o primeiro valor em vez da linha que cliquei
{ativo.map(row => (
<tr>
<input className="key" value={row._id} />
<td>{row.ativo}</td>
<td>{row.quantidade}</td>
<td>{row.data_entrada}</td>
<td>{row.valor_entrada}</td>
<td>{row.data_saida}</td>
<td>{row.valor_saida}</td>
<td>R${row.valor_saida - row.valor_entrada}</td>
<td><a onClick={edit}>Editar</a></td>

<div className="popupedit">
<div className="popupedit-content">
<img src={close} alt="close" onClick={fechar} className="close" width="20px" height="20px"/>
<center><input type="text" placeholder="Ativo"></input>
<input type="text" placeholder="Lotes"></input>
<div className="datacompra">
<input type="date" placeholder="Data da Compra" className="data"></input>
<input type="checkbox" className="check"></input><label className="check">Hoje</label>
</div>
<input type="text" placeholder="Valor da Compra"></input>
<div className="datacompra">
<input type="date" placeholder="Data da Compra" className="data"></input>
<input type="checkbox" className="check"></input><label className="check">Hoje</label>
</div>
<input type="text" placeholder="Valor da Venda"></input> </center>
<button className="button">Adicionar</button>
</div>
</div>
</tr>


// função que chama exibi o popup
function edit(){
document.querySelector(".popupedit").style.display = "flex";
}

removido
(usa Nenhuma)

Enviado em 24/06/2020 - 13:18h

O melhor jeito que vejo de se fazer isso é transformar essa classe css "popupedit" em um componente. Também vai ser necessário construir um estado para ocultar/mostrar esse componente quando clicar no botão editar e também para passar os campos necessários para mostrar no popup.

Mais tarde posto um exemplo de como fazer isso em React Hooks e em Classes.

VictorGuedes
(usa CentOS)

Enviado em 24/06/2020 - 13:27h

Eu agradeço muito cara. Estou iniciando no React e estou um pouco de dificuldade de associar o que eu devo usar do React mesmo, acaba que estou usando muito JS puro.

removido
(usa Nenhuma)

Enviado em 24/06/2020 - 20:12h

React Hooks:

import React, { useState } from 'react';



const EditPopup = ({ elements }) => (

  <div className="popupedit">

    <div className="popupedit-content">

    <img src="" alt="close" onClick="" className="close" width="20px" height="20px" />

    <center>

       <input type="text" placeholder="Ativo"></input>

       <input type="text" placeholder="Lotes"></input>

       <div className="datacompra">

           <input type="date" placeholder="Data da Compra" className="data"></input>

           <input type="checkbox" className="check"></input><label className="check">Hoje</label>

       </div>

       <input type="text" placeholder="Valor da Compra"></input>

       <div className="datacompra">

           <input type="date" placeholder="Data da Compra" className="data"></input>

           <input type="checkbox" className="check"></input><label className="check">Hoje</label>

       </div>

       <input type="text" placeholder="Valor da Venda"></input>

   </center>

   <button className="button">Adicionar</button>

  </div>

 </div>

);



export default () => {

   const [editValue, setEditValue] = useState(-1);



   return (

		<React.Fragment>

			{ativo.map(row => (

				<tr key={row._id}>

					<input className="key" value={row._id} />

					<td>{row.ativo}</td>

					<td>{row.quantidade}</td>

					<td>{row.data_entrada}</td>

					<td>{row.valor_entrada}</td>

					<td>{row.data_saida}</td>

					<td>{row.valor_saida}</td>

					<td>R${row.valor_saida - row.valor_entrada}</td>

					<td><a onClick={() => setEditValue(row._id)}>Editar</a></td>

				

					{editValue === row._id && <EditPopup elements={row} />}

				</tr>

			))}

		</React.Fragment>

   );

}; 

Classe:

import React from 'react';



const EditPopup = ({ elements }) => (

  <div className="popupedit">

    <div className="popupedit-content">

    <img src="" alt="close" onClick="" className="close" width="20px" height="20px" />

    <center>

       <input type="text" placeholder="Ativo"></input>

       <input type="text" placeholder="Lotes"></input>

       <div className="datacompra">

           <input type="date" placeholder="Data da Compra" className="data"></input>

           <input type="checkbox" className="check"></input><label className="check">Hoje</label>

       </div>

       <input type="text" placeholder="Valor da Compra"></input>

       <div className="datacompra">

           <input type="date" placeholder="Data da Compra" className="data"></input>

           <input type="checkbox" className="check"></input><label className="check">Hoje</label>

       </div>

       <input type="text" placeholder="Valor da Venda"></input>

   </center>

   <button className="button">Adicionar</button>

  </div>

 </div>

);



export default class App extends React.Component {

    constructor(props) {

        super(props);



        this.state = {

            editValue: -1

        };

    }



    onEdit(id) {

        this.setState({ editValue: id });

    }



    render() {

        return (

            <React.Fragment>

                {ativo.map(row => (

                    <tr key={row._id}>

                        <input className="key" value={row._id} />

                        <td>{row.ativo}</td>

                        <td>{row.quantidade}</td>

                        <td>{row.data_entrada}</td>

                        <td>{row.valor_entrada}</td>

                        <td>{row.data_saida}</td>

                        <td>{row.valor_saida}</td>

                        <td>R${row.valor_saida - row.valor_entrada}</td>

                        <td><a onClick={() => this.onEdit(row._id)}>Editar</a></td>

                    

                        {this.state.editValue === row._id && <EditPopup elements={row} />}

                    </tr>

                ))}

            </React.Fragment>

       );

    }

} 

Veja que o seu "popupedit" virou um componente, e agora temos um state para pegar o id selecionado e mostrar as informações do item.