Apresentar o SweetAlert2 para confirmar antes de excluir o registro no banco de dados com Laravel 11 e React
Neste tutorial, será apresentado como utilizar o SweetAlert2 para confirmar antes de excluir um registro no banco de dados com Laravel 11 e React.
Primeiramente, será demonstrado como instalar o SweetAlert2 no Laravel.
Em seguida, será explicado como exibir o SweetAlert2 para que o usuário confirme a exclusão do registro no banco de dados.
Por fim, será mostrado como apresentar a mensagem de sucesso no React usando o SweetAlert2.
Download do código fonte desenvolvido na aula: Download
PlayList sobre Laravel 11 + Breeze + React 11: Acessar
Receber as aulas gratuitas do curso de Laravel: Acessar
Para começar, é utilizado como base o projeto da aula "Como apagar registro do banco de dados com Laravel 11 e React".
O SweetAlert2 foi instalado para exibir a mensagem de confirmação.
npm install sweetalert2Criado o componente "resources/js/Components/Delete/ConfirmDeleteButton.jsx", que exibe a mensagem de confirmação utilizando SweetAlert2.
import { useForm } from "@inertiajs/react";
import React from "react";
import DangerButton from "../Button/DangerButton";
import Swal from "sweetalert2";
function ConfirmDeleteButton({ id, routeName }) {
const { delete: destroy } = useForm();
const handleDelete = () => {
Swal.fire({
title: "Tem certeza?",
text: "Você não poderá reverter esta ação!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#ef4444",
cancelButtonColor: "#3b82f6",
confirmButtonText: "Sim, excluir!",
cancelButtonText: "Cancelar"
}).then((result) => {
if (result.isConfirmed) {
destroy(route(routeName, id), {
onSuccess: () => {
Swal.fire({
title: "Excluído!",
text: "O registro foi excluído com sucesso!",
icon: "success"
});
},
onError: () => {
Swal.fire({
title: "Erro!",
text: "Ocorreu um erro ao tentar excluir o registro",
icon: "error"
});
}
});
}
});
}
return (
<DangerButton className="ms-1 text-sm" onClick={handleDelete}>
Apagar
</DangerButton>
);
}
export default ConfirmDeleteButton;O componente criado acima é utilizado na página que contém a funcionalidade de listagem de registros: "resources/js/Pages/Users/UserIndex.js".
<ConfirmDeleteButton id={user.id} routeName="users.destroy" />Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!