blog

May 09, 2023

Como construir formulários em React usando o formulário React Hook

Obtenha seus formulários React construídos e validados com o menor esforço. Prédio

Obtenha seus formulários React construídos e validados com o menor esforço.

Construir formulários em um aplicativo React pode ser complexo e demorado. Com a ajuda da biblioteca React Hook Form, você pode adicionar facilmente formulários de alto desempenho ao seu aplicativo React.

React Hook Form é uma biblioteca para construção de formulários em React que simplifica o processo de criação de formulários complexos e reutilizáveis. Se você deseja criar um aplicativo React, deve aprender a criar formulários no React usando a biblioteca React Hook Form.

Para começar a usar o React Hook Form, você deve instalá-lo usando os gerenciadores de pacotes npm ou yarn.

Para instalar o React Hook Form usando npm, execute o seguinte comando em seu terminal:

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

Para criar um formulário usando React Hook Form, você deve utilizar ouseForm gancho. OuseFormhook fornece acesso a métodos e propriedades que você usará para criar e gerenciar seus formulários em seu aplicativo React.

Aqui está um exemplo mostrando como usar ouseFormgancho:

A biblioteca React Hook Form usa oregistro para registrar seus valores de entrada no gancho. OregistroO método conecta os campos de entrada de um formulário à biblioteca React Hook Form para que a biblioteca possa rastrear e validar os campos de entrada.

No bloco de código acima, você registra uma entrada com o nome 'firstname'. OmanipularEnviarO método da biblioteca React Hook Form lida com o envio do formulário.

Para lidar com o envio do formulário, você passará a função de retorno de chamadaao enviarpara omanipularEnviar método. Oao enviarA função receberá um objeto contendo os valores de todas as entradas do formulário.

Oregistro O método permite que você configure regras de validação para seus campos de entrada. Para adicionar validação aos seus campos de entrada, você passa um objeto com regras de validação como o segundo argumento para oregistrométodo.

Igual a:

Neste exemplo, você adiciona uma regra de validação ao campo de entrada "firstname" e duas regras de validação à "password". OobrigatórioA regra especifica que o usuário precisa preencher os campos de entrada e não pode enviar o formulário se os campos estiverem vazios.

Ocomprimento máximo A regra define o número máximo de letras alfabéticas do valor de entrada. Além doobrigatórioecomprimento máximométodos, você pode adicionar outras regras de validação, comomin,máximo,minLength,padrão, evalidar.

Ominregra especifica o valor mínimo para um campo de entrada e omáximoregra especifica seu valor máximo.

Você pode usar ominemáximoregras com entradas do tipo número, assim:

O valor do campo de entrada acima deve ser no mínimo 18 e não mais que 35.

OminLengthregra é semelhante aocomprimento máximoregra, mas define o número mínimo de letras alfabéticas:

Neste exemplo, a regra minLength especifica que o valor da entrada deve ter pelo menos 10 caracteres.

Opadrão regra especifica um padrão de expressão regular ao qual o valor de entrada deve corresponder. Ovalidar A regra permite definir uma função de validação personalizada para validar o valor de entrada. A função deve retornar ouverdadeiroou uma mensagem de erro de string.

Por exemplo:

Neste exemplo, a entrada "firstname" usa opadrão regra. Opadrãorequer que o valor de entrada contenha apenas caracteres alfabéticos (maiúsculas e minúsculas).

A entrada "teste" usa ovalidarregra para definir uma função de validação personalizada que verifica se seu valor é menor ou igual a 12.