Formik parte 2 — Melhorando formulários em React com libs de componentes

“person holding brown handheld tool” by Malte Wingen on Unsplash

Se ainda não viu, veja a parte 1!

E agora, fresquinha, veja a parte 3!

Veja a nova API do Formik com hooks!

Dando continuidade à sequência de artigos sobre o Formik, faremos alguns testes com componentes de terceiros. Eles são uma mão na roda por serem práticos e ótimos para um rápido desenvolvimento. Também são excelentes para quem não gosta/não tem paciência/não tem muita familiaridade com css para usar styled components — No meu caso, as duas primeiras opções :D

Para o exemplo desse artigo, usarei o Semantic UI, pois ele tem uma boa documentação, um ótimo playground embutido na documentação para rápidos testes / protótipos, é bonito e bem cheio de features! Uso ele no trabalho e em projetos pessoais.

Contudo, esse artigo também serve para as demais libs (ReactBootstrap, Antd, Element), basta seguir a documentação e fazer as adaptações.

Mão à obra!

Segundo a documentação do Formik, para que possamos utilizar 3rd party components, existem três abordagens:

<Field component={...} />

<Field render={...} />

<Field children />

Eis os exemplos, respectivamente:

Todos geram o mesmo resultado no final, então simplesmente você escolhe a que melhor lhe convir. Entretanto, vamos aos poréns:

• Porém 1: Se for usar a abordagem de component, você perde o intellisense (do VSCode por exemplo), porém a implementação do Field fica muito menor, o que o torna mais legível. Contudo, não da pra importar o Input do Semantic direto, é preciso criar um stateless component, para utilizá-lo, assim:

• Porém 2: Se for de render, você terá um Field mais verboso e terá que aplicar as props direto no Input:

• Porém 3: O mesmo que o porém 2:

Ai vai do gosto do freguês. Eu particularmente fico com o component.

Como nem tudo são flores, nem inputs, você logo vai perceber um pequeno problema com os Dropdowns do Semantic

Formik Article 2 - CodeSandbox

Aproveita e da uma fuçada, têm tudo que já fizemos aqui!

Você vai notar que esse carinha abaixo, não funciona como os outros:

Isso ocorre por que o evento de change do dropdown, não segue o mesmo padrão do React.

Dá uma olhada, clicando em “Try it”

Esse comportamento fora do padrão não é coisa do Semantic, isso é meio “normal” em algumas libs (como o Antd também). Nesse caso, teremos que fazer assim:

Vamos as explicações:

• Na linha 1, além de pegar o field e o props, você também tem acesso ao form, que contêm a maioria dos métodos do Formik, incluindo o setFieldValuee o setFieldTouched.
• Na linha 7, temos a chamada do setFieldValueque por sua vez, recebe um parâmetro name — que será o mesmo name usado no Field — e o value que lhe será atribuído. (Como pode observar, o value, vem do segundo parâmetro do evento e não do primeiro, como acontece no React).
  Caso esse seu Dropdown seja dinâmico, você pode trocar o onChange do exemplo, por esse: onChange={(e, {name, value}) => setFieldValue([name], value)}
• Na linha 8, temos o setFieldTouched, que indica se o usuário já passou por aquele campo. Ele recebe os parâmetros name, isTouched e shouldValidate .
O name segue a mesma regra citada da linha 7, o isTouched é um boolean pra indicar se o componente foi ou não "tocado” e o shouldValidate é auto-explicativo :)

Bom, acho que por ora é apenas isso.
O próximo artigo será sobre validações do formulário!

Falou!