React - Versão 19.2

16 - Manipulação de Formulários (1ª parte)

Nesta aula, vamos aprender a manipular formulários no React. Utilizaremos o useState para capturar os valores dos campos de formulário como input, select e radio.

1. Exemplo básico com Input

Vamos começar com um exemplo simples, onde capturamos o valor de um input e exibimos esse valor na tela:

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

// Componente
function Formulario(){

    // State
    const[texto, setTexto] = useState("");

    // Extrair o valor do input e enviar para o state texto
    const valorInput = (e) => {
        setTexto(e.target.value);
    }

    // Retorno
    return(
        <form>
            <h1>{texto}</h1>
            <input type="text" onChange={valorInput} />
        </form>
    );

}

// Exportar
export default Formulario;

Explicação:

• Quando o usuário digita no input, o valor é capturado e enviado para o state usando o setTexto
• O valor do texto é exibido em tempo real no <h1>

---

2. Exemplo com Select

Agora, vamos usar um select para capturar a opção selecionada e exibir o valor na tela:

import { useState } from "react";

function FormularioSelect(){

    const [opcao, setOpcao] = useState("opcao1");

    const valorSelect = (e) => {
        setOpcao(e.target.value);
    }

    return(
        <form>
            <h1>Opção Selecionada: {opcao}</h1>
            <select onChange={valorSelect} value={opcao}>
                <option value="opcao1">Opção 1</option>
                <option value="opcao2">Opção 2</option>
                <option value="opcao3">Opção 3</option>
            </select>
        </form>
    );
}

export default FormularioSelect;

Explicação:

• Quando o usuário seleciona uma opção, o onChange é chamado e o valor é atualizado no state com setOpcao
• O valor selecionado é exibido em tempo real no <h1>

---

3. Exemplo com Radio Button

Agora, vamos capturar a opção selecionada de um conjunto de botões de rádio:

import { useState } from "react";

function FormularioRadio(){

    const [opcaoRadio, setOpcaoRadio] = useState("");

    const valorRadio = (e) => {
        setOpcaoRadio(e.target.value);
    }

    return(
        <form>
            <h1>Opção Selecionada: {opcaoRadio}</h1>
            <label>
                <input type="radio" value="opcao1" name="grupo" onChange={valorRadio} /> Opção 1
            </label>
            <label>
                <input type="radio" value="opcao2" name="grupo" onChange={valorRadio} /> Opção 2
            </label>
            <label>
                <input type="radio" value="opcao3" name="grupo" onChange={valorRadio} /> Opção 3
            </label>
        </form>
    );
}

export default FormularioRadio;

Explicação:

• Os botões de rádio possuem o mesmo nome (name="grupo"), o que garante que apenas um possa ser selecionado por vez
• A função valorRadio é chamada quando o usuário seleciona uma opção, e o valor é armazenado no state com setOpcaoRadio

---

4. Exemplo Completo - Input, Select e Radio

Aqui está um exemplo que utiliza todos os campos de formulário que vimos até agora:

import { useState } from "react";

function FormularioCompleto(){

    const [texto, setTexto] = useState("");
    const [opcao, setOpcao] = useState("opcao1");
    const [opcaoRadio, setOpcaoRadio] = useState("");

    const valorInput = (e) => {
        setTexto(e.target.value);
    }

    const valorSelect = (e) => {
        setOpcao(e.target.value);
    }

    const valorRadio = (e) => {
        setOpcaoRadio(e.target.value);
    }

    return(
        <form>
            <h1>Texto: {texto}</h1>
            <input type="text" onChange={valorInput} />
            
            <h1>Opção Selecionada: {opcao}</h1>
            <select onChange={valorSelect} value={opcao}>
                <option value="opcao1">Opção 1</option>
                <option value="opcao2">Opção 2</option>
                <option value="opcao3">Opção 3</option>
            </select>

            <h1>Opção de Rádio: {opcaoRadio}</h1>
            <label>
                <input type="radio" value="opcao1" name="grupo" onChange={valorRadio} /> Opção 1
            </label>
            <label>
                <input type="radio" value="opcao2" name="grupo" onChange={valorRadio} /> Opção 2
            </label>
            <label>
                <input type="radio" value="opcao3" name="grupo" onChange={valorRadio} /> Opção 3
            </label>
        </form>
    );
}

export default FormularioCompleto;

Explicação:

• Temos três campos agora: um input, um select e um conjunto de radio buttons
• Cada campo está manipulando o seu próprio estado com useState
• Os valores dos campos são exibidos em tempo real na tela

---

Dicas Importantes

• useState é ideal para controlar o valor dos campos de formulário no React
• Quando for capturar o valor de um campo, use a função onChange
• Para os campos select e radio, o valor é sempre capturado no e.target.value
• Não se esqueça de usar name para garantir que apenas uma opção do grupo de radio seja selecionada por vez

Agora você já sabe como manipular formulários no React.

Abaixo compartilho um vídeo, explicando sobre a manipulação de elementos de formulário: