Como criar formulário editar com Laravel 11 e React
Neste tutorial, será apresentado como criar um formulário de edição com Laravel 11 + Breeze + React.
Primeiramente, será demonstrado como recuperar os dados para o formulário editar.
Em seguida, será explicado como criar o formulário editar com React.
Por fim, será mostrado como atualizar o registro no banco de dados com Laravel.
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 criar formulário de cadastro com Laravel 11 e React".
Criada a rota no arquivo "routes/web.php".
Route::get('/edit-user/{user}', [UserController::class, 'edit'])->name('users.edit');Criado o método "edit" na controller "app/Http/Controllers/UserController.php". O método é responsável em recuperar os dados do registro no banco de dados e carregar a "view Users/UserEdit.jsx".
public function edit(User $user): Response
{
return Inertia::render('Users/UserEdit', ['user' => $user]);
}Criada a view com React no Laravel, em "resources/js/Pages/Users/UserEdit.js", com o formulário e a função handleSubmit, que recebe os dados do formulário.
import InfoButton from '@/Components/Button/InfoButton';
import PrimaryButton from '@/Components/Button/PrimaryButton';
import WarningButton from '@/Components/Button/WarningButton';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, useForm } from '@inertiajs/react';
export default function UserEdit({ auth, user }) {
const {data, setData, put, processing, errors} = useForm({
id: user.id || '',
name: user.name || '',
email: user.email || '',
});
const handleSubmit = (e) => {
e.preventDefault(); // Não atualizar a página
// Enviar os dados para a rota editar
put(route('users.update', {user: data.id}));
}
return (
<AuthenticatedLayout
user={auth.user}
header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Usuário</h2>}
>
<Head title="Usuário" />
<div className="py-4 max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="overflow-hidden bg-white shadow-lg sm:rounded-lg dark:bg-gray-800">
<div className="flex justify-between items-center m-4">
<h3 className="text-lg">Editar</h3>
<div className="flex space-x-1">
<Link href={route('users.index')}>
<InfoButton className="text-sm">Listar</InfoButton>
</Link>
<Link href={route('users.show', { user: user.id})}>
<PrimaryButton className="text-sm">Visualizar</PrimaryButton>
</Link>
</div>
</div>
{/* Formulário para editar usuário */}
<div className="bg-gray-50 text-sm dark:bg-gray-700 p-4 rounded-lg shadow-md">
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium text-gray-700 ">Nome</label>
<input
id="name"
type="text"
placeholder="Nome completo do usuário"
value={data.name}
onChange={(e) => setData('name', e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
{errors.name && <span className="text-red-600">{errors.name}</span>}
</div>
<div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700 ">E-mail</label>
<input
id="email"
type="email"
placeholder="Melhor e-mail do usuário"
value={data.email}
onChange={(e) => setData('email', e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
{errors.email && <span className="text-red-600">{errors.email}</span>}
</div>
<div className="flex justify-end">
<WarningButton
type="submit"
disabled={processing}
className="text-sm"
>
Salvar
</WarningButton>
</div>
</form>
</div>
</div>
</div>
</AuthenticatedLayout>
);
}
Os dados do formulário acima são enviados para a rota "users.update", sendo necessário criá-la no arquivo "routes/web.php".
Route::put('/update-user/{user}', [UserController::class, 'update'])->name('users.update');Criado o método "update" na controller "app/Http/Controllers/UserController.php". O método é responsável por editar o usuário no banco de dados e redirecionar para a tela de visualização "users.show".
public function update(Request $request, User $user)
{
// Validar os dados de formulário
$request->validate(
[
'name' => 'required|string|max:255',
'email' => "required|string|email|max:255|unique:users,email,{$user->id}",
],
[
'name.required' => 'O campo nome é obrigatório.',
'name.string' => 'O nome deve ser uma string válida.',
'name.max' => 'O nome não pode ter mais que 255 caracteres.',
'email.required' => 'O campo e-mail é obrigatório.',
'email.string' => 'O e-mail deve ser uma string válida.',
'email.email' => 'O e-mail deve ser um endereço de e-mail válido.',
'email.max' => 'O e-mail não pode ter mais que 255 caracteres.',
'email.unique' => 'Este e-mail já está cadastrado.',
]
);
$user->update([
'name' => $request->name,
'email' => $request->email,
]);
return Redirect::route('users.show', ['user' => $user->id])->with('success', 'Usuário editado com sucesso!');
}Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!