Com o uso do Formik Context é mais fácil de organizar a estrutura de seus formulários, deixando de lado a preocupação de ficar passando várias propriedades entre os componentes; facilitando também a criação de componentes genéricos.
Na imagem abaixo vemos como funciona o Formik Context. Declarando o formulário Formik, seus elementos filhos tem o acesso instantâneo do estado atual do formulário declarado no componente pai.
Posso colocar meu formulário com duas sessões separadas em componentes diferentes, AddressForm (formulário de endereço) e ProfileForm (formulário do perfil do usuário), dessa forma você consegue organizar melhor seus formulários no projeto. Não precisando passar a instância do Formik em cada componente criado, possibilitando gerenciar todas sessões do seu formulário em um único contexto.
Bora pro código?!
Vamos criar um projeto com 2 componentes, o primeiro declara o Formik e o input "name", o componente filho acessa o valor do campo "name" no estado do Formik em tempo real e exibe no browser.
Executando os comandos abaixo no terminal criamos o projeto:
Após criar o projeto, iremos usar o trecho de código abaixo no arquivo App.tsx, para testarmos o Formik Context:
O conteúdo digitado no input será consultado e exibido instantâneamente em outro componente, resultado:
Terá novos artigos sobre o assunto, demonstrando o formulário com várias sessões, e também a criação de Input e Autocomplete Genéricos
Top comments (0)