React - Versão 19.2

17 - Manipulação de Formulários (2ª parte)

Nesta aula, vamos aprender a manipular múltiplos campos de formulário utilizando um único state em forma de objeto. Essa abordagem é ideal quando temos vários campos relacionados, como nome, cidade, e-mail, etc.

1. Exemplo com dois campos (nome e cidade)

Vamos criar um formulário com dois campos de texto e capturar seus valores usando apenas um state:

// Importar useState
import { useState } from "react";

// Componente
function Formulario2(){

    // State como objeto
    const [formulario, setFormulario] = useState({
        nome: "",
        cidade: ""
    });

    // Função para capturar o valor dos inputs
    const valorInput = (e) => {
        const { name, value } = e.target;
        setFormulario({...formulario, [name]: value});
    }

    // Retorno
    return(
        <form>
            <h1>Nome: {formulario.nome}</h1>
            <h1>Cidade: {formulario.cidade}</h1>
            <input type="text" name="nome" placeholder="Digite seu nome" onChange={valorInput} />
            <input type="text" name="cidade" placeholder="Digite sua cidade" onChange={valorInput} />
        </form>
    );

}

// Exportar
export default Formulario2;

Explicação:

• O state formulario é um objeto que contém os campos nome e cidade
• O onChange de cada input chama a função valorInput
• Dentro de valorInput, usamos const {name, value} = e.target para extrair o nome do campo e seu valor
• O setFormulario atualiza o state usando o operador spread (...formulario) para manter os outros valores inalterados
• Dessa forma, podemos gerenciar vários campos com apenas um state

---

2. Possível expansão

Se você tiver mais campos, como e-mail ou telefone, basta adicioná-los ao objeto do state e dar o mesmo name correspondente no input:

const [formulario, setFormulario] = useState({
    nome: "",
    cidade: "",
    email: "",
    telefone: ""
});

E todos os inputs ainda podem compartilhar a mesma função valorInput sem precisar criar uma função separada para cada campo.

---

Dicas importantes

• Usar um único state como objeto facilita o gerenciamento de formulários grandes
• Lembre-se sempre de manter os outros campos usando o operador ...formulario
• O atributo name do input deve corresponder exatamente ao nome da propriedade do objeto no state

Agora você já sabe como manipular múltiplos campos de formulário usando um único state no React!

Compartilho nossa aula no YouTube: