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

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.

Instalando o formulário React Hook

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:

npm install react-hook-form

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

yarn add react-hook-form

Criando um formulário usando React Hook Form

Para criar um formulário usando React Hook Form, você deve utilizar o

useForm gancho. O useForm hook lhe dá acesso a métodos e propriedades que você usará para crie e gerencie seus formulários em seu aplicativo React.

Aqui está um exemplo mostrando como usar o useForm gancho:

importar Reagir de'reagir'
importar { useForm } de'forma de gancho de reação';
funçãoForma() {
const { registrar, manipularEnviar } = useForm();
const onSubmit = (dados) =>console.log (dados);
retornar (



'texto' { ...registro("primeiro nome")} />
Enviar</button>
 </form>
 )
}
exportarpadrão Forma;

A biblioteca React Hook Form usa o registro para registrar seus valores de entrada no gancho. O registro O 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'. manipularEnviar O 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 chamada ao enviar para o manipularEnviar método. O ao enviar A função receberá um objeto contendo os valores de todas as entradas do formulário.

Validar entradas com método de registro

O registro 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 o registro método.

Igual a:

importar Reagir de'reagir'
importar { useForm } de'forma de gancho de reação';
funçãoForma() {
const{ registrar, manipularEnviar } = useForm();
const onSubmit = (dados) =>console.log (dados);
retornar (



'texto' { ...registro("primeiro nome", { obrigatório: verdadeiro})} />
'senha' { ...registro("senha", { obrigatório: verdadeiro, comprimento máximo: 10})}/>
Enviar</button>
 </form>
 )
}
exportarpadrão Forma;

Neste exemplo, você adiciona uma regra de validação ao campo de entrada "firstname" e duas regras de validação à "password". O obrigatório A 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.

O comprimento máximo A regra define o número máximo de letras alfabéticas do valor de entrada. Além do obrigatório e comprimento máximo métodos, você pode adicionar outras regras de validação, como min, máximo, minLength, padrão, e validar.

mínimo máximo

O min regra especifica o valor mínimo para um campo de entrada e o máximo regra especifica seu valor máximo.

Você pode usar o min e máximo regras com entradas do tipo número, assim:

'número' { ...registro("idade", {min: 18, máximo: 35}) } />

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

minLength

O minLength regra é semelhante ao comprimento máximo regra, mas define o número mínimo de letras alfabéticas:

'texto' { ...registro("nome", { minLength: 10 })}/>

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

padronizar e validar

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

Por exemplo:

'texto' { ...registro("primeiro nome", {padrão: **/^[A-Za-z]+$/**}) } />
'número' { ...registro("teste", {**validar: (valor) => valor <= 12** }) } />

Neste exemplo, a entrada “firstname” usa o padrão regra. O padrão requer que o valor de entrada contenha apenas caracteres alfabéticos (maiúsculas e minúsculas).

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

Lidando com erros em seu formulário

A biblioteca React Hook Form fornece um mecanismo integrado para tratamento de erros de JavaScript em seus formulários. O manipularEnviar A função, chamada quando o usuário envia o formulário, retorna uma promessa que resolve com os dados do formulário se a validação for bem-sucedida.

No entanto, se ocorrer algum erro de validação, a promessa será rejeitada com um objeto de erro que contém os erros de validação.

Aqui está um exemplo de como lidar com erros usando o manipularEnviar função:

importar Reagir de'reagir'
importar { useForm } de'forma de gancho de reação';
funçãoForma() {
const { registrar, manipularEnviar, formState: { erros } } = useForm();
const onSubmit = (dados) =>console.log (dados); 
retornar (



'texto' { ...registro("primeiro nome", { obrigatório: verdadeiro})} />
 {errors.firstname && <período>Por favor, insira seu primeiro nomeperíodo>}
'número' { ...registro("idade", {min: 18, máximo: 35,}) } />
 {erros.idade?.tipo 'max' && <período> Você é muito velho para este siteperíodo>}
 {erros.idade?.tipo 'min' && <período> Você é muito jovem para este siteperíodo>}
Enviar</button>
 </form>
 )
}
exportarpadrão Forma;

Neste bloco de código, o formState objeto ganha acesso aos erros de cada campo. O erros O objeto armazena os erros de validação para cada campo de entrada. O erros O objeto renderiza condicionalmente uma mensagem de erro para cada campo inválido.

Para o primeiro nome campo de entrada, se o obrigatório regra não for atendida, uma mensagem de erro — "Insira seu primeiro nome" — será exibida ao lado do campo de entrada. Se o valor do idade campo de entrada estiver fora do intervalo permitido, uma mensagem de erro será exibida.

Se o valor for menor que 18, a mensagem de erro será "Você é muito jovem para este site", e se o valor for maior que 35, a mensagem de erro será "Você é muito velho para este site".

Agora você pode criar formulários confiáveis ​​em React

Construir formulários no React pode ser um processo complexo e demorado. Ainda assim, o React Hook Form simplifica essa tarefa, fornecendo uma biblioteca flexível e fácil de usar para gerenciar dados e validação de formulários.

Com a ajuda do hook useForm, método register e método handleSubmit, construir formulários no React torna-se um processo mais eficiente e simplificado. Você pode criar formulários funcionais, melhorando a experiência do usuário e a qualidade geral de seus aplicativos React.