Formik com Hooks - Simplicidade na integração — useFormik()! Parte 1
⚠️ Lembrando que esse é um artigo da versão BETA do Formik e está defasado! Verifique aqui, o novo artigo que substitui esse que está lendo! ⚠️
Veja a primeira série de posts sobre o Formik, começando do básico!
Lá e de volta outra vez!
Depois de ler o anúncio que o Fomik seria reescrito com Hooks, fiquei imaginando como seria a API de um possível useFormik e acompanhei dia após dia por essa tal implementação … e demorou, mas aqui está!
Eu sempre usei a implementação HoC withFormik(), por precisar usar os métodos do Formik — injetados via props — no lifecycle do componente, ou em outros métodos, em formulários não tão triviais. E querendo ou não, sempre ficou meio feio essa implementação de deixar parte do comportamento do formulário dentro do withFormik e outra parte no componente.
Já tentei usar o <Formik> mas sempre achei pior 😑, essa abordagem de colocar muita lógica dentro do return do componente. Todavia, tudo isso é passado — ou quase tudo, afinal ainda não foi lançado oficialmente — mas, vamos fazer uma implementação básica, para ver como ficou 😬
Como não é uma versão final ainda, para adicionar ele ao seu projeto, é necessário colocar a versão:
yarn add formik@2.0
Depois, vamos importar o useFormik e já criar um formulário básico, utilizando o hook:
Se você der um ctrl space (no vscode) ali nas chaves dentro do useFormik — vai encontrar alguns métodos que usamos no corpo do Formik e no withFormik, como initialValues, onSubmit, validate(para validações manuais) validationSchema (para validar com yup), entre outros.
Para começar, vamos invocar os primordiais: initialValues, validate e o onSubmit:
Bom, até aqui, nada muito diferente do já faziamos, né?
Se você der um ctrl space ali dentro do destructuring da linha 1, vai ver todos os métodos que o formik nos provê, como:
- errors
- handleChange
- handleSubmit
- isValid
- resetForm
- setValues
- etc.
Dentre eles, vamos nos familiarizar nesse artigo, com o getFieldProps. Ele (e somente ele) vai manipular os dados dos inputs para nós.
Vamos utiliza-lo da seguinte forma:
Ele espera 2 parâmetros, o primeiro é um nome declarado no initialValues — no nosso caso, name, contact.email, etc — e o segundo, o tipo de input que ele será — text, number, checkbox, radio.
Seguindo a syntax dos hooks, ele retorna 2 valores, onde podemos separa-los com o destructuring. O primeiro (email) contêm name, value, onBlur e onChange, que são exatamente os itens que precisamos para vincular um input ao formik! O segundo, são seus metadados, que são initialValue, touched, error e value .
Usando spread operator, podemos fazer assim:
Não é demais?! 🎉
Para validar, podemos usar os metadados:
E pronto, formulário manipulado e validado de forma simples e eficiente!
Finalizando assim:
Lembrando que tudo isso ainda não é estável, então, nada de produção!
E aqui fica um link, para você brincar e ver como fica, na prática!
