Nesta etapa, vamos implementar a funcionalidade de Cancelar, que permite limpar o formulário e voltar para o modo de cadastro.
Criamos a função cancelar, que reseta o estado do objeto pessoa e retorna os botões para o estado de cadastro:
// Cancelar
const cancelar = () => {
setPessoa({id:null, nome:"", cidade:""});
setBotaoCadastrar(true);
}
Explicando o código:
Agora, passamos a função cancelar para o componente Formulario:
<Formulario cancelar={cancelar} />
Dentro do componente, associamos a função ao botão Cancelar:
<input type="button" onClick={cancelar} value="Cancelar" className="btn btn-primary" />
Dessa forma, ao clicar no botão Cancelar, o formulário é limpo e o usuário pode voltar ao estado inicial de cadastro, pronto para adicionar um novo registro.
No vídeo abaixo, mostro como implementar o botão Cancelar e gerenciar o fluxo entre cadastro, edição e remoção de dados.