🚀 Capítulo 09: Formulários - Alistamento

🎯 Objetivo da Aula

Ao final desta aula, você saberá como capturar dados digitados pelo usuário em formulários usando o conceito de Componentes Controlados (Controlled Components) no React.

---

🏢 O Cenário Prático (Seu Desafio)

A Aliança Rebelde precisa de novos voluntários! Seu desafio hoje é criar o formulário de Alistamento de Rebeldes. Você precisará capturar o nome do voluntário e a sua função desejada (Piloto, Jedi ou Mecânico).

---

🧠 Fundamentos: A Teoria Traduzida

No HTML comum, o próprio navegador guarda o que você digita no campo de texto. No React, nós preferimos que o Estado do componente controle o que aparece na tela. Isso se chama Componente Controlado.

Como funciona?

1. Criamos um estado para guardar o texto: const [nome, setNome] = useState('');
2. Dizemos que o valor do input é esse estado: value={nome}
3. Toda vez que o usuário digitar algo, o evento onChange atualiza o estado: onChange={(e) => setNome(e.target.value)}

---

📖 Exemplo Guiado: Formulário de Nome

Vamos criar um formulário simples.

🛠️ Passo a Passo

Abra o arquivo src/App.jsx e altere o código:

import { useState } from 'react';
 
function App() {
  const [nome, setNome] = useState('');
 
  function enviarFormulario(e) {
    e.preventDefault(); // Evita que a página recarregue
    alert(`Bem-vindo à Aliança, ${nome}!`);
  }
 
  return (
    <div>
      <h1>📝 Alistamento Rebelde</h1>
      
      <form onSubmit={enviarFormulario}>
        <label>Nome do Voluntário:</label>
        <input 
          type="text" 
          value={nome}
          onChange={(e) => setNome(e.target.value)}
        />
        <button type="submit">Alistar</button>
      </form>
 
      {/* Mostrando o valor em tempo real */}
      <p>Digitando: {nome}</p>
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve e veja o navegador.
2. Digite seu nome no campo. Veja que o texto abaixo do formulário muda na mesma hora!
3. Clique em “Alistar” e veja o alerta.

---

🛠️ Prática Obrigatória 1

Adicione um novo campo do tipo <select> (menu suspenso) para o usuário escolher a função: “Piloto” ou “Jedi”. Crie um novo estado const [funcao, setFuncao] = useState('Piloto'); para controlar esse campo.

---

🛠️ Prática Obrigatória 2

Atualize a mensagem do alert() para mostrar também a função escolhida (ex: “Bem-vindo à Aliança, Luke! Sua função será: Jedi”).

---

🔑 Gabarito de Código/Fórmulas

Prática 1 e 2:

No App.jsx:

const [nome, setNome] = useState('');
const [funcao, setFuncao] = useState('Piloto');
 
function enviarFormulario(e) {
  e.preventDefault();
  alert(`Bem-vindo à Aliança, ${nome}! Sua função será: ${funcao}`);
}
 
return (
  <form onSubmit={enviarFormulario}>
    <input value={nome} onChange={(e) => setNome(e.target.value)} />
    
    <select value={funcao} onChange={(e) => setFuncao(e.target.value)}>
      <option value="Piloto">Piloto</option>
      <option value="Jedi">Jedi</option>
    </select>
    
    <button type="submit">Alistar</button>
  </form>
)

---

← Capitulo Anterior | Proximo Capitulo →