Como criar um MultiStep Form com ReactJs
O que é um MultiStep Form ?
É um formulário composto por vários passos, sendo cada passo um componente diferente, como na foto abaixo.
Como podemos desenvolver um?
Podemos fazer de diversas formas, desde fazer a estilização e lógica do zero, até usando uma biblioteca de terceiros.
Aqui nós iremos utilizar a biblioteca Ant Design para acelerar no desenvolvimento da estilização, o objetivo é mostrar a lógica por trás do formulário.
Então vamos lá!
Primeiro passo
Lembrando que para utilizar os comandos que mostraremos aqui, você precisa ter o Node.js e o NPM instalados em sua máquina, siga os links abaixo para realizar a instalação:
Node.js: https://nodejs.org/en/download/
Instalando o Node.js, o NPM já será instalado junto.
Começando o projeto
Primeiro vamos criar um projeto ReactJs do zero, utilizando o comando:
npx create-react-app multi-step-formApós isso, deveremos ter a seguinte estrutura:
Instalando dependências
Agora, vamos instalar a biblioteca Ant Design, utilizando o comando:
npm install antdLembrando que essa biblioteca é um Design System com diversos componentes e funcionalidades. Aqui está o link para o site deles: https://ant.design/
Mãos no código!
Primeiro vamos apagar alguns arquivos dentro da pasta src para limparmos um pouco nosso código!
Sua pasta src deve ficar como na imagem a seguir:
Lembrando que também é necessário remover algumas importações dentro de src/App.js e src/index.js, eles devem ficar como a imagem a seguir:
Após isso, adicione a seguinte linha no arquivo App.js:
import 'antd/dist/antd.cssEssa linha importará todas as estilizações da biblioteca.
Agora, vamos seguir fazendo a estrutura que utilizaremos em nosso projeto.
Get Thiago Robles’s stories in your inbox
Join Medium for free to get updates from this writer.
Dentro de src, crie uma pasta chamada Form, e dentro dessa pasta nós teremos três arquivo, um arquivo chamado index.js, que será o nosso Container, e outros dois chamados de RenderFormSteps.js, e RenderFormButtons.js, e também outras 3 pastas, chamadas de StepOne, StepTwo e FinalStep, lembrando que cada pasta deverá conter um arquivo index.js dentro. Sua estrutura deverá ficar como na imagem seguinte.
Agora, vamos começar a escrever o código do nosso container.
Dentro de src/Form/index.js, nosso arquivo deverá ficar da seguinte forma:
Obs.: esse processo de gerencimento de estado pode ser facilitado utilizando a ContextAPI do React, ou uma biblioteca de terceiros como o Redux ou RecoilJs.
Na imagem acima, utilizamos nosso estado currentStep para definir qual o passo atual, ele é atualizado cada vez que o step é clicado, de forma automática pelo próprio componente de Steps do Antd.
Logo abaixo, utilizo os componentes para renderizar os campos e os botões.
Para o componente RenderFormSteps, passamos como property o currentStep, e nosso objeto formStates com todos os states e setStates, já veremos o porque.
Para o componente RenderFormButtons, passamos o currentStep e o setCurrentStep.
RenderFormSteps.js
Nosso componente se baseará em um switch, que retorna uma componente para cada Step. Nós desestruturamos as propriedades e passamos cada uma para seu devido componente.
RenderFormButtons.js
O componente de botões segue o mesmo raciocínio, porém aqui só precisamos do state currentStep, para alterar o passo atual para o anterior ou para o próximo. Sendo 0 o primeiro, e 2 o ultimo, seguindo a mesma lógica de índices de um array.
Agora vamos aos componentes de formulário!
StepOne
StepTwo
FinalStep
E por último, a estilização…
Também criamos um arquivo dentro da pasta src/Form, chamado styles.css, e importamos dentro de src/Form/index.js. Aqui está seu conteudo:
E o resultado…
E se voltarmos e avançarmos os passos…
Os valores dos campos não se perdem, pois estão todos centralizados no componente principal. Mas como já foi dito, recomendamos alguma outra forma para o gerenciamento de estados, como Context API ou Redux.
É isso meus amigos!
Até a próxima!
