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

🕛 Zeit seit Veröffentlichung: 48 Tage, 23 Stunden 4 Minuten
📆 Veröffentlicht am: 02.08.2024 um 05:47 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

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

Performance: Minimiza a quantidade de renderizações desnecessárias.
API Simples: Fácil de aprender e usar, com uma API baseada em hooks.
Validação Integrada: Suporte integrado para validação de formulários.
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

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;

Explicação do Código

useForm: Hook principal que retorna métodos e objetos para gerenciar o formulário.
register: Método para registrar campos de entrada no formulário.
handleSubmit: Função que lida com a submissão do formulário.
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;

Explicação do Código

Controller: Componente que permite integrar campos de entrada controlados, como react-select.
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

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;

Explicação do Código

yupResolver: Função que permite integrar Yup com React Hook Form.
schema: Esquema de validação definido com Yup.
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.

...

🔧 This Week In React #130: Next.js, callback ref, Zod, Redux, React-Hook-Form, Redux, mdxjs-rs, Tamagui, Skia, Shopify, Solid...

🕛 624 Tage, 10 Stunden 50 Minuten
📆 04.01.2023 um 16:50 Uhr
📈 34.8 Punkte
🔧 Programmierung

☑ Lösungen

☑ Betriebssysteme

☑ IT-Sicherheit

☑ Cyberbedrohungen

☑ Ressourcen

☑ Videos

☑ Sicherheitstipps

☑ Häufig gesucht

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

Introdução

Benefícios do React Hook Form

Instalação

Criando um Formulário Simples

Explicação do Código

Formulário Complexo com Vários Campos

Explicação do Código

Validação com Yup

Instalação do Yup

Implementação

Explicação do Código

Conclusão

Sharing is caring on Social Media