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.