Gerenciamento de formulários - Controle do estado e lógica dos formulários

[Romeusorionaet]

Gerenciamento de Formulários: Controle do Estado e Lógica dos Formulários com React Hook Form e Next.js

No contexto de um projeto em React.js com Next.js, o gerenciamento de formulários é essencial para capturar dados do usuário de maneira eficiente e validar entradas. Uma biblioteca muito usada para facilitar esse processo é o react-hook-form, que fornece uma API simples e poderosa para controle de formulários, integrando-se facilmente com bibliotecas de validação, como zod.

Aqui está o código exemplo com uma explicação detalhada sobre o gerenciamento de estado e lógica do formulário.

export function FormAddress() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<AddressFormData>({
    resolver: zodResolver(addressFormSchema),
  })

  const {
    isLoading,
    oldAddress,
    textButtonSubmitForm,
    iconBasedOnAddress,
    handleAddressForm,
  } = useContext(AddressFormContext)

  return (
    <div>
      <Accordion
        type="single"
        collapsible
        className="mx-auto mt-8 max-w-[800px] rounded-md border border-base_color_dark/10 p-2"
      >
        <AccordionItem value="item-1">
          <AccordionTrigger className="flex w-full justify-between">
            <span>Preencher formulário</span>{' '}
            {isLoading ? '...' : iconBasedOnAddress}
          </AccordionTrigger>
          <AccordionContent>
            <form onSubmit={handleSubmit(handleAddressForm)} className="mt-10">
              <div className="space-y-4">
                {/* Campos do formulário */}
                <label className="flex flex-col gap-1">
                  Nome completo
                  <Input
                    type="text"
                    maxLength={30}
                    placeholder="nome e sobrenome"
                    className="bg-transparent"
                    defaultValue={oldAddress?.username}
                    {...register('username')}
                  />
                  <FormError errors={errors.username?.message} />
                </label>

                {/* Repetição semelhante para outros campos */}
              </div>

              <div className="flex items-center justify-between">
                <Button
                  type="submit"
                  className="mt-8 hover:text-base_color_text_top"
                  aria-disabled={isSubmitting}
                >
                  {textButtonSubmitForm}
                </Button>

                {iconBasedOnAddress}
              </div>
            </form>
          </AccordionContent>
        </AccordionItem>
      </Accordion>

      <div className="mx-auto mb-28 flex max-w-[800px] justify-end">
        <CheckoutCart userHasAddress={!!oldAddress} />
      </div>
    </div>
  )
}

File

Explicação Detalhada:

1. Uso do useForm com Validação

• O hook useForm é usado para controlar o estado do formulário. Ele recebe um objeto de configuração, onde usamos o resolver do zod (zodResolver(addressFormSchema)) para aplicar a validação do esquema definido previamente.
• register: Usado para registrar os campos do formulário, associando-os ao estado controlado do formulário.
• handleSubmit: Função que gerencia o envio do formulário e chama a função handleAddressForm (obtida pelo contexto).
• formState: Contém informações sobre o estado do formulário, como erros de validação (errors) e se o formulário está sendo submetido (isSubmitting).

2. Integração com Context API

• O formulário faz uso do AddressFormContext para acessar dados compartilhados, como o endereço antigo (oldAddress), o ícone baseado no endereço (iconBasedOnAddress), e a função handleAddressForm que gerencia o envio do formulário.
• Isso permite que os dados do formulário sejam gerenciados de forma centralizada e reutilizável em outros componentes.

3. Componentes Personalizados

• Inputs: Componentes personalizados para os campos de entrada (Input), estilizados com TailwindCSS, e integrados ao estado do formulário com register.
• FormError: Componente para exibir mensagens de erro de validação para cada campo.
• Button: Botão de envio que desabilita automaticamente quando o formulário está sendo submetido.

4. Accordion para UI Dinâmica

• O uso do Accordion (componente da biblioteca @radix-ui/react-accordion) melhora a experiência do usuário, permitindo que o formulário seja expandido e colapsado conforme necessário, economizando espaço na UI.

Vantagens desse Gerenciamento:

1. Validação Integrada: A validação com zod permite garantir que os dados inseridos no formulário estão no formato correto antes de serem submetidos.
2. Centralização de Estado: Com o uso de Context API, o estado do formulário pode ser acessado e manipulado de maneira eficiente em vários componentes.
3. Manutenção Facilitada: O uso de componentes personalizados, como Input e FormError, torna o código mais modular e fácil de manter.
4. Feedback de Submissão: A UI é atualizada em tempo real para refletir o estado do formulário, como exibir o ícone baseado no endereço ou desativar o botão de envio quando necessário.

Considerações Finais:

Esse exemplo de gerenciamento de formulários com react-hook-form e Context API em Next.js é uma abordagem poderosa e eficiente para construir formulários complexos, validá-los e integrá-los ao restante da aplicação de maneira fluida e performática.