Formulário multi step com React

Este é um post com uma idéia de formulário multi step criado em ReactJS.

Formulários multi step são aqueles formulários divididos em etapas diferentes que o usuário vai preenchendo e seguindo um passo a passo.

Geralmente são feitos dessa forma para que o preenchimento não fique cansativo e chato com uma tela cheia de campos.
Um bom exemplo é um formulário de checkout, em que o usuário precisa inserir dados pessoais, de entrega e pagamento.

Vamos ao código

Primeiro vamos criar a estrutura dos passos do form:

const steps = [
  {
    id: 'PERSONAL',
    title: "Dados pessoais"
  },
  {
    id: 'SHIPPING',
    title: "Endereço de entrega"
  },
  {
    id: 'PAYMENT',
    title: "Dados de pagamento"
  }
];

A idéia é bem simples. Um array com a lista de passos em que poderemos usar o index para navegar no formulário e exibir os inputs de acordo com o ID.

Vamos usar um state e uma função para renderizar o próximo passo:

const [currentStep, setCurrentStep] = useState(0);

function handleNextStep() {
  setCurrentStep((prevState) => prevState + 1);
}

O state currentStep é iniciado com o valor de 0 para renderizar o primeiro item do array.

A função handleNextStep pega o valor atual do state currentStep e incrementa o valor, dessa forma irá renderizar o seguinte item do array.

Para renderizar os inputs no JSX podemos usar o valor do state e o ID do item para criar uma condição e exibir os campos do formulário.

{steps[currentStep].id === 'PERSONAL' && (
  <div className="fields">
    <div className="field">
      <input
        type="text"
        placeholder="Nome"
        name="name"
        onChange={handleInputChange}
        value={formValues.name}
      />
    </div>
    <div className="field">
      <input
        type="text"
        placeholder="E-mail"
        name="email"
        onChange={handleInputChange}
        value={formValues.email}
      />
    </div>
    <div className="field">
      <input
        type="text"
        placeholder="Telefone"
        name="phone"
        onChange={handleInputChange}
        value={formValues.phone}
      />
    </div>
  </div>
)}

Para salvar os dados preenchidos podemos usar um state para todos os campos e uma função para setar esses valores de forma dinâmica.

const [formValues, setFormValues] = useState({
  name: "",
  email: "",
  phone: "",
});

function handleInputChange(event) {
  const { name, value } = event.target;

  setFormValues((prevState) => ({
    ...prevState,
    [name]: value
  }));
}

A função handleInputChange pega o name e o value do evento para setar de forma dinâmica os valores no state formValues

Por fim vamos renderizar os botões de avançar ou enviar formulário caso o passo atual seja o último.

{currentStep < steps.length - 1 && (
  <button 
    className="button next" 
    type="button" 
    onClick={handleNextStep}
  >
    Próximo
  </button>
)}

{currentStep === steps.length - 1 && (
  <button className="button submit" type="submit">
    Enviar
  </button>
)}

Com isso nosso formulário está completo, avançando de passo em passo até o submit.

Concluindo

Esta é apenas uma das muitas formas de se criar um formulário multi step em React.
Uma outra abordagem bem usada é recuperar os passos do formulário de uma API, podendo assim criar diferentes passos dependendo do retorno.

Acesse a demo no codesandbox para conferir o código completo e o formulário funcionando.

Comments

[João Paulo Ávila]

Artigo excelente, mas só uma ressalva, acredito que a chamada da função ao clicar o botão é handleNextStep

[Felipe Lôbo]

Muito obrigado meu caro. Foi bem útil.