Como usar Formik para criar formulários em React
Formik torna os formulários React muito mais fáceis de criar e trabalhar. Descobrir como!
Formik é uma biblioteca de gerenciamento de formulários que fornece componentes e ganchos para facilitar o processo de criação de formulários React. Formik cuida dos estados do formulário, validação e manipuladores de erros para você, o que facilita a coleta e armazenamento de dados do usuário.
Neste tutorial, você aprenderá como criar um formulário de registro no React usando Formik. Para acompanhar, você deve se sentir confortável trabalhando com ganchos React.
Crie um aplicativo React
Use create-react-app para criar um novo projeto React:
npx create-react-app formik-form
Agora, navegue até a pasta formik-form/src e exclua todos os arquivos, exceto App.js.
Em seguida, crie um novo arquivo e nomeie-o como Register.js. É aqui que você adicionará seu formulário. Lembre-se de importá-lo em App.js.
Crie 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 do formulário são manipulados pelo próprio React. Um componente não controlado é aquele cujos dados do formulário são manipulados pelo DOM.
Os documentos oficiais do React recomendam 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 formulário criado usando um componente controlado.
import { useState } from "react";
const Register = () => {
const [email, setemail] = useState("");
const [password, setpassword] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
console.log(email);
};
const handleEmail = (event) => {
setemail(event.target.value);
};
const handlePassword = (event) => {
setpassword(event.target.value);
};
return (
<form className="register-form" onSubmit={handleSubmit}>
<input
id="email"
name="email"
type="email"
placeholder="Your Email"
value={email}
onChange={handleEmail}
/>
<input
id="password"
name="password"
type="password"
placeholder="Your password"
value={password}
onChange={handlePassword}
/>
<input type="submit" value="Submit" />
</form>
);
};
export default Register;
No código acima, você está inicializando o estado e criando uma função manipuladora para cada campo de entrada. Embora isso funcione, seu código pode facilmente ficar 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. Torna mais fácil lidar com o estado do formulário, validar e enviar dados do formulário.
Adicionar Formik ao React
Antes de usar o formik, adicione-o ao seu projeto usando npm.
npm install formik
Para integrar o Formik, você usará o gancho useFormik. Em Register.js, importe useFormik na parte superior do arquivo:
import { useFormik } from "formik"
A primeira etapa é inicializar os valores do formulário. Neste caso, você inicializará o e-mail e a senha.
const formik = useFormik({
initialValues: {
email: "",
password: "",
},
onSubmit: values => {
// handle form submission
},
});
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.
A próxima etapa é usar o objeto formik para colocar e retirar os valores do formulário do estado.
<form className="register-form" onSubmit={formik.handleSubmit}>
<input
id="email"
name="email"
type="email"
placeholder="Your Email"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<input
id="password"
name="password"
type="password"
placeholder="Your password"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<input type="submit" value="Submit" />
</form>
No código acima, você está:
- Fornecendo aos campos de entrada um valor de id e name igual ao usado durante a inicialização no gancho useFormik.
- Acessando o valor de um campo, usando seu nome para recuperá-lo de formik.values.
- Vinculando formik.handleChange ao evento onChange para exibir os valores de entrada conforme o usuário digita.
- Usando formik.handleBlur para controlar os campos visitados.
- Vinculando formik.handleSubmit ao evento onSubmit para acionar a função onSubmit que você adicionou ao useFormik< gancho.
Habilitar validação de formulário
Ao criar um formulário, é importante validar a entrada do usuário, pois isso facilita a autenticação do usuário, pois você armazena apenas os dados no formato correto. No seu formulário, por exemplo, você pode verificar se o e-mail informado é válido e se a senha possui 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 a useFormik, qualquer erro de validação encontrado estará disponível em Formik.errors, indexado no nome da entrada. Por exemplo, você pode acessar um erro no campo de e-mail usando Formik.errors.email.
Em Register.js, crie a função validate e inclua-a em useFormik.
const formik = useFormik({
initialValues: {
email: "",
password: "",
},
validate: () => {
const errors = {};
console.log(errors)
if (!formik.values.email) {
errors.email = "Required";
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(formik.values.email)
) {
errors.email = "Invalid email address";
}
if (!formik.values.password) {
errors.password = "Required";
} else if (formik.values.password.length < 8) {
errors.password = "Must be 8 characters or more";
}
return errors;
},
onSubmit: (values) => {
console.log("submitted!");
// handle submission
},
});
Adicionar tratamento de erros
A seguir, exiba as mensagens de erro, se existirem. Use Formik.touched para verificar se o campo foi visitado. Isso evita a exibição de um erro em um campo que o usuário ainda não visitou.
<form className="register-form">
<input
id="email"
name="email"
type="email"
placeholder="Your Email"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.email && formik.errors.email ? <div>{formik.errors.email}</div> : null}
<input
id="password"
name="password"
type="password"
placeholder="Your password"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.password && formik.errors.password ? <div>{formik.errors.password}</div> : null}
<input type="submit" value="Submit" />
</form>
Validar dados usando Yup
Formik fornece uma maneira mais fácil de validar formulários usando a biblioteca Yup. Instale sim para começar.
npm install yup
Importe yup em Register.js.
import * as Yup from "yup"
Em vez de escrever sua própria função de validação personalizada, use Yup para verificar se o e-mail e a senha são válidos.
const formik = useFormik({
initialValues: {
email: "",
password: "",
},
validationSchema: Yup.object().shape({
email: Yup.string()
.email("Invalid email address")
.required("Required"),
password: Yup.string()
.min(8, "Must be 8 characters or more")
.required("Required")
}),
onSubmit: (values) => {
console.log("submitted!");
// handle submission
},
});
E é isso! Você criou um formulário de registro simples usando Formik e Yup.
Resumindo 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.