O guia completo para React Hook Form

Os formulários são uma parte essencial de como os usuários interagem com sites e aplicativos da web. Validar os dados do usuário passados ​​pelo formulário é uma responsabilidade crucial para um desenvolvedor.

O React-hook-form é uma biblioteca que ajuda você a validar formulários no React. React-hook-form é uma biblioteca mínima sem quaisquer outras dependências. É eficiente e fácil de usar, exigindo que os desenvolvedores escrevam menos linhas de código do que outras bibliotecas de formulários.

Neste guia, você aprenderá como usar a biblioteca de formulários do React Hook para construir formulários excelentes no React sem usar nenhuma estrutura de renderização complicada ou componentes de ordem superior.

Formulário React Hook: Introdução

O React Hook Form tem uma abordagem ligeiramente diferente de outras bibliotecas de formulários no ecossistema React. O React Hook Form adota o uso de entradas não controladas usando ref em vez de depender do estado para controlar as entradas. Essa abordagem torna os formulários mais eficientes e reduz o número de novas renderizações.

O tamanho do pacote é muito pequeno e mínimo: apenas 9,1 KB reduzido + gzip , e tem zero dependências. A API é muito intuitiva e fornece uma experiência perfeita aos desenvolvedores ao trabalhar com formulários. React Hook Form segue os padrões HTML para validar os formulários usando a API de validação baseada em restrições.

Outro ótimo recurso oferecido pelo React Hook Form é sua integração fácil com as bibliotecas de IU, já que a maioria das bibliotecas suporta ref .

Para instalar o React Hook Form, execute o seguinte comando:

 npm install react-hook-form 

Formulário de registro simples

Nesta seção, você aprenderá sobre os fundamentos do gancho useForm criando um formulário de registro muito básico.

Primeiro, importe o gancho useForm do pacote react-hook-form .

 import {useForm} de"react-hook-form"; 

Então, dentro do seu componente, use o Gancho da seguinte maneira:

 const {register, handleSubmit}=useForm (); 

O gancho useForm retorna um objeto contendo poucas propriedades. Por enquanto, você só precisa de register e handleSubmit .

O método register ajuda a registrar um campo de entrada no React Hook Form para que fique disponível para validação e seu valor possa ser rastreado para alterações. Para registrar a entrada, passe o método register para ref>/code> prop da entrada.

Um ponto importante a observar aqui é que o componente de entrada deve ter uma propriedade nome e seu valor deve ser único.

O método handleSubmit , como o nome sugere, gerencia o envio do formulário. Ele precisa ser passado como um prop para o prop onSubmit do componente form .

O método handleSubmit pode lidar com duas funções como argumentos. A primeira função passada como um argumento será chamada junto com os valores de campo registrados quando a validação do formulário for bem-sucedida. A segunda função é chamada com erros quando a validação falha.

 const onFormSubmit=data=> console.log (dados); const onErrors=erros=> console.error (erros); 

{/*... */}
 

Agora que você tem uma boa ideia sobre o uso básico do gancho useForm , dê uma olhada em um exemplo mais real:

 import React from"react";
import {useForm} de"react-hook-form";
import {Form, FormGroup, Label, Input, Button} de"reactstrap";
const RegisterForm=()=> { const {registrar, manipularSubmit}=useForm (); const handleRegistration=(dados)=> console.log (dados); Retorna (    Nome      Email      Senha     Enviar   );
};
exportar RegisterForm padrão; 

Como você pode ver, nenhum outro componente foi importado para rastrear os valores de entrada. O gancho useForm torna o código do componente mais limpo e fácil de manter. E como o formulário não é controlado, você não precisa passar adereços como onChange e value para cada entrada.

No exemplo acima, a biblioteca reactstrap é usada para construir a IU do formulário. Você pode notar aqui que o método register foi passado para o prop innerRef em vez de ref ; isso ocorre porque os componentes do formulário reactstrap fornecem acesso à entrada DOM nativa usando o prop innerRef .

Você pode usar qualquer outra biblioteca de IU de sua escolha para criar o formulário. Certifique-se de verificar o prop para acessar a referência ao componente de entrada nativo.

Na próxima seção, você aprenderá como lidar com a validação do formulário no formulário acima.

Lidando com validação e erros

Para aplicar validações a um campo, você pode passar opções de validação para o método de registro. As opções de validação são semelhantes ao padrão de validação de formulário HTML existente.

As opções de validação incluem as seguintes propriedades.

• obrigatório -Indica se o campo é obrigatório ou não. Se esta propriedade for definida como verdadeira, o campo não pode estar vazio.
• minlength e maxlength define o comprimento mínimo e máximo para um valor de entrada de string.
• min e max -Define os valores mínimo e máximo para o valor numérico.
• tipo -Indica o tipo do campo de entrada; pode ser e-mail, número, texto ou qualquer outro tipo de entrada HTML padrão.
• pattern -Define um padrão para o valor de entrada usando uma expressão regular.

Se você deseja marcar um campo como obrigatório, pode escrever algo da seguinte maneira.

Ao enviar, isso resultará no seguinte objeto de erro.

 {
nome: { tipo:"obrigatório" mensagem:"" ref:   }
} 

Aqui, a propriedade type se refere ao tipo da validação com falha e a propriedade ref contém o elemento de entrada DOM nativo.

Você também pode passar uma mensagem de erro para o campo passando uma string em vez de um booleano para a propriedade de validação.

//...
   Nome   
 

Você também pode acessar o objeto de erro no gancho useForm .

 const {register, handleSubmit, errors}=useForm (); 

Abaixo você pode encontrar o exemplo completo.

 import React from"react";
import {useForm} de"react-hook-form";
import {Form, FormGroup, Label, Input, Button} de"reactstrap";
const RegisterForm=()=> { const {registrar, manipularSubmit, erros}=useForm (); const handleRegistration=(dados)=> console.log (dados); const handleError=(erros)=> {}; const registerOptions={ nome: {obrigatório:"Nome é obrigatório"}, email: {required:"Email is required"}, senha: { obrigatório:"A senha é necessária", minLength: { valor: 8, mensagem:"A senha deve ter pelo menos 8 caracteres" } } }; Retorna (    Nome    {errors.name && errors.name.message}     Email    {errors.email && errors.email.message}     Senha    {errors.password && errors.password.message}    Enviar   );
};
exportar RegisterForm padrão; 

Se quiser validar o campo quando houver um evento onChange ou onBlur , você pode passar uma propriedade de modo para o useForm Hook.

 const {register, handleSubmit, errors}=useForm ({ modo:"onBlur"
}); 

Você pode encontrar mais detalhes sobre o gancho useForm na referência da API .

Uso com componentes de terceiros

Em alguns casos, o componente de IU externo que você deseja usar no formulário pode não oferecer suporte a ref e só pode ser controlado pelo estado.

O React Hook Form tem disposições para esses casos de uso e pode se integrar facilmente com qualquer componente controlado por terceiros.

O React Hook Form fornece um componente wrapper chamado Controller que permite registrar um componente externo controlado, semelhante ao funcionamento do método register . Neste caso, em vez do método register , você usará o objeto control do gancho useForm .

 const {register, handleSubmit, errors, control}=useForm (); 

Considere que você deve criar um campo de função em seu formulário que aceitará valores de uma entrada selecionada. Você pode criar a entrada de seleção usando a biblioteca react-select .

O objeto control deve ser passado para o prop control do componente Controller , junto com o nome do campo. Você pode especificar as regras de validação usando a proposta rules prop.

O componente controlado deve ser passado para o componente Controlador usando o prop as . O prop as injetará prop onChange , onBlur e value no componente. O componente Select também requer um prop options para renderizar as opções suspensas. Assim, você pode adicionar o prop options diretamente ao componente Controller e ele será passado para o componente Select , junto com quaisquer outros props adicionais.

Você pode verificar o exemplo completo para o campo de função abaixo.

 import {useForm, Controller} de"react-hook-form";
importar Selecione em"react-select";
//...
const {registrar, manipularSubmit, erros, controle}=useForm ({ modo:"onBlur"
}); const selectOptions=[ {valor:"aluno", rótulo:"Aluno"}, {valor:"desenvolvedor", rótulo:"Desenvolvedor"}, {valor:"gerente", rótulo:"Gerente"}
]; const registerOptions={ //... papel: {obrigatório:"O papel é obrigatório"}
}; //...   Sua função    {errors.role && errors.role.message} 
 

Você pode consultar a referência da API para o componente Controller aqui para uma explicação detalhada.

Conclusão

O React Hook Form é uma excelente adição ao ecossistema React Open Source. Isso tornou a criação e manutenção de formulários muito mais fácil para os desenvolvedores. A melhor parte dessa biblioteca é que ela se concentra mais na experiência do desenvolvedor e é muito flexível para trabalhar. O React Hook Form também se integra bem com bibliotecas de gerenciamento de estado e funciona excelente no React Native.

Era isso neste guia. Você pode verificar o código completo e a demonstração para sua referência aqui . Até a próxima vez, fique seguro e continue construindo mais formulários. Atenciosamente,

Referências

Documentação do formulário React Hook

A postagem O guia completo para o Formulário React Hook apareceu primeiro no LogRocket Blog .

Source link