Formik é uma biblioteca de gerenciamento de formulários que fornece componentes e ganchos para facilitar o processo de criação de formulários React. O Formik cuida dos estados do formulário, validação e manipuladores de erros para você, o que facilita a coleta e o armazenamento de dados do usuário.
Neste tutorial, você aprenderá como criar um formulário de registro no React usando o Formik. Para acompanhar, você deve se sentir confortável trabalhando com hooks do React.
Crie um aplicativo React
Use create-react-app para criar um novo projeto React:
npx create-react-app formik-form
Agora, navegue até o formik-form/src pasta e exclua todos os arquivos, exceto App.js.
Em seguida, crie um novo arquivo e nomeie-o Register.js. É aqui que você adicionará seu formulário. Lembre-se de importá-lo em App.js.
Criar um formulário de reação
Você pode criar formulários React usando componentes controlados ou componentes não controlados. Um componente controlado é aquele cujos dados de formulário são manipulados pelo próprio React. Um componente não controlado é aquele cujos dados de formulário são manipulados pelo DOM.
O oficial Documentos do React recomendamos o uso de componentes controlados. Eles permitem que você acompanhe os dados do formulário no estado local e, portanto, tenha controle total do formulário.
Abaixo está um exemplo de um formulário criado usando um componente controlado.
import { useState } de "reagir";
const Registrar = () => {
const [email, setemail] = useState("");
const [password, setpassword] = useState("");
const handleSubmit = (evento) => {
event.preventDefault();
console.log (e-mail);
};
const handleEmail = (evento) => {
setemail (evento.destino.valor);
};
const handlePassword = (evento) => {
setpassword (evento.destino.valor);
};
Retorna (
);
};
exportação padrão Registro;
No código acima, você está inicializando o estado e criando uma função de manipulador para cada campo de entrada. Embora isso funcione, seu código pode ficar facilmente repetitivo e confuso, especialmente com muitos campos de entrada. Adicionar validação e tratamento de mensagens de erro é outro desafio.
Formik visa reduzir esses problemas. Facilita o manuseio do estado do formulário, valida e envia os dados do formulário.
Adicionar Formik para Reagir
Antes de usar formulário, adicione-o ao seu projeto usando npm.
npm instalar formik
Para integrar o Formik, você usará o useFormik gancho. Dentro Register.js, importe useFormik na parte superior do arquivo:
import { useFormik } de "formik"
O primeiro passo é inicializar os valores do formulário. Nesse caso, você inicializará o e-mail e a senha.
const formik = useFormik({
valores iniciais: {
o email: "",
senha: "",
},
onSubmit: valores => {
// trata o envio do formulário
},
});
Você também está adicionando a função onSubmit que recebe os valores do formulário e trata do envio do formulário. Para um formulário de registro como este, isso pode significar a criação de um novo usuário no banco de dados.
O próximo passo é usar o formulário objeto para obter os valores do formulário dentro e fora do estado.
No código acima, você é:
- Dando aos campos de entrada um Eu iria e nome valor igual ao usado durante a inicialização no useFormik gancho.
- Acessando o valor de um campo, usando seu nome para recuperá-lo valores.formik.
- Vinculativo formik.handleChange ao evento onChange para exibir os valores de entrada conforme o usuário digita.
- Usando formik.handleBlur para acompanhar os campos visitados.
- Vinculativo formik.handleSubmit ao ao enviar evento para acionar o ao enviar função que você adicionou ao useFormik gancho.
Ativar validação de formulário
Ao criar um formulário, é importante validar a entrada do usuário, pois autenticação de usuário fácil, pois você armazena dados apenas no formato correto. No seu formulário, por exemplo, você pode verificar se o e-mail informado é válido e se a senha tem mais de 8 caracteres.
Para validar o formulário, defina uma função de validação que aceite os valores do formulário e retorne um objeto de erro.
Se você adicionar a função de validação ao useFormik, qualquer erro de validação encontrado estará disponível em Formik.errors, indexado no nome de entrada. Por exemplo, você pode acessar um erro sobre o campo de e-mail usando Formik.errors.email.
Dentro Register.js, crie o validar função e incluí-lo em useFormik.
const formik = useFormik({
valores iniciais: {
o email: "",
senha: "",
},
validar: () => {
erros constantes = {};
console.log (erros)
if (!formik.values.email) {
errors.email = "Obrigatório";
} senão se (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
) {
errors.email = "Endereço de e-mail inválido";
}
if (!formik.values.password) {
errors.password = "Obrigatório";
} else if (formik.values.password.length < 8) {
errors.password = "Deve ter 8 caracteres ou mais";
}
erros de retorno;
},
onSubmit: (valores) => {
console.log("enviado!");
// trata do envio
},
});
Adicionar tratamento de erros
Em seguida, exiba as mensagens de erro, se existirem. Usar Formik.touched para verificar se o campo foi visitado. Isso evita a exibição de um erro para um campo que o usuário ainda não visitou.
Validar dados usando Yup
Formik fornece uma maneira mais fácil de validar formulários usando o Sim biblioteca. Instale o yup para começar.
npm instalar sim
Importar sim dentro Register.js.
import * como Yup de "yup"
Em vez de escrever sua própria função de validação personalizada, use Yup para verificar se o email e a senha são válidos.
const formik = useFormik({
valores iniciais: {
o email: "",
senha: "",
},
ValidationSchema: Yup.object().shape({
e-mail: Sim.string()
.email("Endereço de e-mail inválido")
.required("Obrigatório"),
senha: Sim.string()
.min (8, "Deve ter 8 caracteres ou mais")
.required("Obrigatório")
}),
onSubmit: (valores) => {
console.log("enviado!");
// trata do envio
},
});
E é isso! Você criou um formulário de registro simples usando Formik e Yup.
Encerrando tudo
Os formulários são parte integrante de qualquer aplicativo, pois permitem coletar informações do usuário. No React, criar formulários pode ser uma experiência dolorosa, especialmente se você estiver lidando com muitos dados ou vários formulários. Uma ferramenta como o Formik fornece uma maneira fácil e contínua de recuperar e validar valores de formulário.
10 melhores práticas de reação que você precisa seguir em 2022
Leia a seguir
Tópicos relacionados
- Programação
- Programação
- JavaScript
- Reagir
Sobre o autor
Mary Gathoni é uma desenvolvedora de software apaixonada por criar conteúdo técnico que não seja apenas informativo, mas também envolvente. Quando ela não está codificando ou escrevendo, ela gosta de sair com os amigos e estar ao ar livre.
Assine a nossa newsletter
Junte-se à nossa newsletter para dicas de tecnologia, análises, e-books gratuitos e ofertas exclusivas!
Clique aqui para assinar
