DEV Community

Cover image for Gerenciamento de Formulários Complexos em React com React Hook Form
Vitor Rios
Vitor Rios

Posted on

Gerenciamento de Formulários Complexos em React com React Hook Form

#react #form #yup

Introdução

Gerenciar formulários em aplicações React pode ser uma tarefa desafiadora, especialmente quando se trata de formulários complexos. O React Hook Form é uma biblioteca que simplifica a manipulação de formulários, oferecendo uma API fácil de usar, com suporte a validação, integração com outras bibliotecas e excelente performance. Neste artigo, vamos explorar como utilizar o React Hook Form para gerenciar formulários complexos de maneira eficaz.

Benefícios do React Hook Form

  1. Performance: Minimiza a quantidade de renderizações desnecessárias.
  2. API Simples: Fácil de aprender e usar, com uma API baseada em hooks.
  3. Validação Integrada: Suporte integrado para validação de formulários.
  4. Compatibilidade: Integra-se facilmente com outras bibliotecas de UI e validação.

Instalação

Para começar, você precisa instalar o React Hook Form em seu projeto:

npm install react-hook-form
Enter fullscreen mode Exit fullscreen mode

Criando um Formulário Simples

Vamos criar um formulário de exemplo para demonstrar os conceitos básicos do React Hook Form.

import React from 'react'; import { useForm } from 'react-hook-form'; const SimpleForm = () => { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <div> <label htmlFor="name">Name</label> <input id="name" {...register('name', { required: 'Name is required' })} /> {errors.name && <p>{errors.name.message}</p>} </div> <div> <label htmlFor="email">Email</label> <input id="email" type="email" {...register('email', { required: 'Email is required' })} /> {errors.email && <p>{errors.email.message}</p>} </div> <button type="submit">Submit</button> </form> ); }; export default SimpleForm;
Enter fullscreen mode Exit fullscreen mode

Explicação do Código

  1. useForm: Hook principal que retorna métodos e objetos para gerenciar o formulário.
  2. register: Método para registrar campos de entrada no formulário.
  3. handleSubmit: Função que lida com a submissão do formulário.
  4. formState.errors: Objeto que contém os erros de validação.

Formulário Complexo com Vários Campos

Agora, vamos criar um formulário mais complexo, com múltiplos campos e validação.

import React from 'react'; import { useForm, Controller } from 'react-hook-form'; import Select from 'react-select'; const ComplexForm = () => { const { register, handleSubmit, control, formState: { errors } } = useForm(); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <div> <label htmlFor="firstName">First Name</label> <input id="firstName" {...register('firstName', { required: 'First Name is required' })} /> {errors.firstName && <p>{errors.firstName.message}</p>} </div> <div> <label htmlFor="lastName">Last Name</label> <input id="lastName" {...register('lastName', { required: 'Last Name is required' })} /> {errors.lastName && <p>{errors.lastName.message}</p>} </div> <div> <label htmlFor="age">Age</label> <input id="age" type="number" {...register('age', { min: { value: 18, message: 'You must be at least 18 years old' } })} /> {errors.age && <p>{errors.age.message}</p>} </div> <div> <label htmlFor="gender">Gender</label> <Controller name="gender" control={control} render={({ field }) => ( <Select {...field} options={[ { value: 'male', label: 'Male' }, { value: 'female', label: 'Female' }, { value: 'other', label: 'Other' } ]} /> )} /> </div> <button type="submit">Submit</button> </form> ); }; export default ComplexForm;
Enter fullscreen mode Exit fullscreen mode

Explicação do Código

  1. Controller: Componente que permite integrar campos de entrada controlados, como react-select.
  2. control: Objeto retornado pelo useForm que é usado pelo Controller para gerenciar os campos controlados.

Validação com Yup

O React Hook Form se integra facilmente com bibliotecas de validação como o Yup. Vamos adicionar validação com Yup ao nosso formulário.

Instalação do Yup 

npm install yup @hookform/resolvers
Enter fullscreen mode Exit fullscreen mode

Implementação 

import React from 'react'; import { useForm, Controller } from 'react-hook-form'; import Select from 'react-select'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; const schema = yup.object().shape({ firstName: yup.string().required('First Name is required'), lastName: yup.string().required('Last Name is required'), age: yup.number().min(18, 'You must be at least 18 years old').required('Age is required'), gender: yup.string().required('Gender is required'), }); const FormWithYupValidation = () => { const { register, handleSubmit, control, formState: { errors } } = useForm({ resolver: yupResolver(schema), }); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <div> <label htmlFor="firstName">First Name</label> <input id="firstName" {...register('firstName')} /> {errors.firstName && <p>{errors.firstName.message}</p>} </div> <div> <label htmlFor="lastName">Last Name</label> <input id="lastName" {...register('lastName')} /> {errors.lastName && <p>{errors.lastName.message}</p>} </div> <div> <label htmlFor="age">Age</label> <input id="age" type="number" {...register('age')} /> {errors.age && <p>{errors.age.message}</p>} </div> <div> <label htmlFor="gender">Gender</label> <Controller name="gender" control={control} render={({ field }) => ( <Select {...field} options={[ { value: 'male', label: 'Male' }, { value: 'female', label: 'Female' }, { value: 'other', label: 'Other' } ]} /> )} /> {errors.gender && <p>{errors.gender.message}</p>} </div> <button type="submit">Submit</button> </form> ); }; export default FormWithYupValidation;
Enter fullscreen mode Exit fullscreen mode

Explicação do Código

  1. yupResolver: Função que permite integrar Yup com React Hook Form.
  2. schema: Esquema de validação definido com Yup.
  3. useForm: Configurado com yupResolver para usar o esquema de validação.

Conclusão

Gerenciar formulários complexos em React pode ser simplificado com o uso do React Hook Form. Com sua API fácil de usar, suporte para validação integrada e excelente performance, React Hook Form é uma ferramenta poderosa para desenvolvedores. Ao integrar com outras bibliotecas como react-select e Yup, você pode criar formulários robustos e altamente funcionais.

Implementar React Hook Form em suas aplicações React pode transformar a maneira como você gerencia formulários, tornando o desenvolvimento mais eficiente e dinâmico.

Top comments (0)