Simplificando formulários no React com o UseForm
Os formulários em aplicações web podem ser complexos e difíceis de gerenciar, principalmente quando lidam com muitas validações e estados no React. Portanto, procurar maneiras que simplifiquem esse processo, podem ser ótimas alternativas.
Por este motivo, neste artigo, vamos explorar como usar o npm useForm para criar formulários eficientes e validados no React.
O que é o useForm?
Trata-se de uma biblioteca de gerenciamento de formulários para o React que foi projetada para facilitar o gerenciamento de estados, validações e manipulação de eventos. Ele foi desenvolvido para simplificar o processo de criação de formulários no React, permitindo que os desenvolvedores se concentrem na lógica de negócios em vez de se preocuparem com a manipulação detalhada de eventos e estados em formulários.
Primeiros passos
Você precisa instalá-lo como uma dependência em seu projeto. Basta executar o código abaixo:
npm install react-hook-form
Agora no componente que contém o formulário, comece importando o useForm.
import { useForm } from 'react-hook-form';
Agora mostrarei um exemplo de código, e em seguida, explicarei linha por linha
import { useForm } from 'react-hook-form'
export default function MeuFormulario() {
const { register, handleSubmit, formState: { errors } } = useForm();
function submit(data){
console.log(data);
// Lógica para lidar com os dados do formulário
};
return (
<>
<form onSubmit={handleSubmit(submit)}>
<input type='text' {...register('nome', {required:true, maxLength: 30 })} />
{errors.nome?.type === 'required' && <span style={{color: 'red'}}>Campo obrigatório</span>}
{errors.nome?.type === 'maxLength' && <span style={{color: 'red'}}>Máximo de 30 caracteres</span>}
<input type='email' {...register('email', {required: true, pattern: /^\S+@\S+$/i})}/>
{errors.email?.type === 'required' && <span style={{color: 'red'}}>Campo obrigatório</span>}
{errors.email?.type === 'pattern' && <span style={{color: 'red'}}>E-mail inválido</span>}
<input type="submit" value="Enviar" />
</form>
</>
);
};
Neste exemplo, estamos usando duas funções retornadas pelo useForm, a Register e o HandleSubmit, e também, uma propriedade formState.
const { register, handleSubmit, formState: { errors } } = useForm();
Usa-se a handleSubmit como uma função que será acionada, sempre que, o formulário for submetido, a partir do evento, onSubmit.
export default function MeuFormulario() {
const { register, handleSubmit, formState: { errors } } = useForm();
return ( <>
<form onSubmit={handleSubmit(submit)}>
<input type='text />
<input type='email' />
<input type="submit" value="Enviar" />
</form>
</>
);
};
Porém, perceba que essa função recebe como parâmetro o 'submit', que também é uma função, que será a responsável pela lógica dos dados submetidos no formulário.
export default function MeuFormulario() {
const { register, handleSubmit, formState: { errors } } = useForm();
function submit(data){
console.log(data);
// Lógica para lidar com os dados do formulário
};
return (
<>
<form onSubmit={handleSubmit(submit)}>
<input type='text />
<input type='email' />
<input type="submit" value="Enviar" />
</form>
</>
);
};
Neste exemplo, a função submit, recebe o parâmetro data, que é irá retornar um objeto com os dados do formulário, conforme podemos observar com o console.log, abaixo:
Entretanto, a parte responsável por facilitar que o handleSubmit capture e valide os dados informados no formulário, é a função Register.
export default function MeuFormulario() {
const { register, handleSubmit, formState: { errors } } = useForm();
function submit(data){
console.log(data);
// Lógica para lidar com os dados do formulário
};
return (
<>
<form onSubmit={handleSubmit(submit)}>
<input type='text' {...register('nome', {required:true, maxLength: 30 })} />
<input type='email' {...register('email', {required: true, pattern: /^\S+@\S+$/i})}/>
<input type="submit" value="Enviar" />
</form>
</>
);
};
Essa função precisa ser armazenada diretamente nos inputs para que estes sejam "registrados", e posteriormente, enviados para o handleSubmit.
O primeiro parâmetro da função register será o nome do input, que substitui a propriedade name, logo em seguida, é possível adicionar outros parâmetros, como o required para tornar o preenchimento do input obrigatório, maxLength, para quando há limitação de caracteres, e até mesmo o pattern, que permite validar os valores dos inputs por uma Expressão Regular (regex).
No código, ainda usamos o formState, que possui uma propriedade erros, que contém os erros associados a cada campo do formulário, com base em validações especificadas no register.
const { register, handleSubmit, formState: { errors } } = useForm();
function submit(data){
console.log(data);
};
return (
<>
<form onSubmit={handleSubmit(submit)}>
input type='text' {...register('nome', {required:true, maxLength: 30 })} />
{errors.nome?.type === 'required' && <span style={{color: 'red'}}>Campo obrigatório</span>}
{errors.nome?.type === 'maxLength' && <span style={{color: 'red'}}>Máximo de 30 caracteres</span>}
<input type='email' {...register('email', {required: true, pattern: /^\S+@\S+$/i})}/>
{errors.email?.type === 'required' && <span style={{color: 'red'}}>Campo obrigatório</span>}
{errors.email?.type === 'pattern' && <span style={{color: 'red'}}>E-mail inválido</span>}
</form>
</>
);
No exemplo acima, exibimos mensagens de erro na tela usando a propriedade errors para indicar quando os campos são obrigatórios ou quando um e-mail inválido é inserido.
É importante ressaltar que o useForm também oferece várias outras funcionalidades igualmente úteis, e que você encontrar mais informações detalhadas e exemplos de uso na documentação oficial.
Porém, apenas com estes três recursos básicos, conseguimos, capturar as chaves e valores de um formulário facilmente, validar erros, e trabalhar com uma função específica para criar uma lógica com os dados capturados, como, por exemplo, quando há a necessidade de enviar informações preenchidas de um formulário para uma API.
Gostou do conteúdo? Fique à vontade para me seguir no Linkedin =)