0

EDIT: Tenho um crud em react, e nele um dos botões é de deletar um user. Quando clico em deletar, abre uma modal para confirmar, abaixo o botão, mandando o id a ser deletado:

<button className="custom-button"
    onClick={event => openModalDelete(event, user.id)}
    value={user.id} style={{ marginLeft: "6%" }}>Deletar
</button>

aqui segue o código da função que abre a modal, e nesse caso printa o id recebido corretamente, do user selecionado, a modal aparece e tudo ok.

const openModalDelete = (e, id) => {
        e.preventDefault();
        console.log(id, 'id recebido');
        showModal = !showModal;
        const element = document.getElementById('modal');

        setTimeout(() => {
            if (showModal) {
                element.classList.add('modal-show')
            }
            else {
                element.classList.remove('modal-show')
            }
        }, 250);
    }

Até aí ok: Porém em seguida para deletar é preciso confirmar. Ao clicar em confirmar, eu não sei como receber o id. Tentei com e.target.value mas não vem nada.

  const handleDelete = async (e) => {
        console.log("deleting", e);
        //const deletedId = await e.target.value;
        //await api.delete(`/users/${deletedId}`);
        //window.location.reload();
    }

Agora aqui a modal:

<div id="modal">
    <div >
         <div className="container">
            <a href="/" onClick={event => openModalDelete(event)} style={{ color: "black" }}>x</a>
              <div style={styles.alignCenter}>
                     Deseja realmente deletar?
              </div>
                <button style={styles.alignCenter} className="custom-button" 
                onClick={event => handleDelete(event)}>Deletar</button>
         </div>
     </div>
</div>

Nesse event q vai na handleDelete, ele vai vazio.

acabei resolvendo aqui fazendo uma let global, que recebe onde ele vê o id (quando abre a modal) e guarda, e depois nessa aí ele consegue enxergar

Mas ainda assim, não sei se é a forma correta de passar adiante o id. Alguma idéia? Sobre deletar e atualizar a página? Isso não deve ser uma boa prática né?

É meu primeiro post aqui, se precisar de mais code, por favor me avise. Obrigado.

6
  • 1
    Olá Willian. Você não consegue passar o id como parâmetro para sua função handleDelete? Onde está a chamada da função? Commented 9/01/2021 às 5:40
  • A sua pergunta falta muita coisa para gente responder, já vi que tem coisas erradas no seu código então se puder melhorar a sua pergunta e mostrar o que realmente não está acontecendo?
    – novic
    Commented 9/01/2021 às 12:29
  • @novic Mals, eu achei que ficaria muito extenso colocar tudo aqui. Commented 9/01/2021 às 17:55
  • @CarlosQuerioz ele chama no onClick, editei o post, agora talvez eu tenha sido mais claro... valeu! Commented 9/01/2021 às 18:05
  • O seu código tem imperfeições, você está aprendendo mexer com React?
    – novic
    Commented 9/01/2021 às 21:22

1 Resposta 1

0

Acontece que quando você abre o modal, mesmo você passando para essa função de abrir o modal o parametro que você precisa, não dá pra passar para a função que você usa para a ação de deletar.

A solução que você comentou de deixar uma variável global talvez não seja uma melhor solução. Ou você pode usar o state mesmo colocando por exemplo uma propriedade tipo selectedItem ou usar uma referência ao modal com useRef e ao abrir o modal setar uma propriedade dele como id que foi selecionado.

Com a solução que você está usando hoje eu deixaria no state mesmo.

1
  • Então Carlos, acabei mudando tudo pra state, ficou melhor, acabei deletando algumas linhas de código. O prazo era até hoje, acabei refatorando algumas coisas e enviando... Agradeço a ajuda! Vou ler mais sobre, inclusive quero aprender esse useRef... Valeu! Commented 10/01/2021 às 23:13

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 .