Kapitel 7: Event-Handling und Formulare

In diesem Kapitel lernen wir, wie man Events in React behandelt und Formulare bindet.

---

7.1 Event-Bindung in React

🖱️ Event-Bindungssyntax

In React werden Events mit camelCase geschrieben (nicht kleingeschrieben wie in HTML).

// ❌ HTML (kleingeschrieben)
<button onclick="handleClick()">Klick mich</button>

// ✅ React (camelCase)
<button onClick={handleClick}>Klick mich</button>

📝 Häufige Events

Event	React Syntax	Beschreibung
Klick	onClick	Mausklick
Änderung	onChange	Eingabeänderung
Submit	onSubmit	Formular senden
Maus über	onMouseOver	Mauszeiger darüber
Tastatur	onKeyPress	Tastendruck

---

7.2 Event-Handlers schreiben

1️⃣ Inline-Pfeilfunktion (EINFACH)

function App() {
  return (
    <button onClick={() => alert('Geklickt!')}>
      Klick mich
    </button>
  );
}

2️⃣ Separate Funktion (EMPFOHLEN!)

function App() {
  const handleClick = () => {
    alert('Geklickt!');
  };

  return (
    <button onClick={handleClick}>
      Klick mich
    </button>
  );
}

3️⃣ Mit Parametern

function App() {
  const handleClick = (name) => {
    alert(`Hallo ${name}!`);
  };

  return (
    <button onClick={() => handleClick('Max')}>
      Grüße Max
    </button>
  );
}

---

7.3 Event-Objekt (e)

📥 Event-Objekt verwenden

function App() {
  const handleClick = (e) => {
    console.log('Geklickt!');
    console.log(e.target); // Das geklickte Element
  };

  return <button onClick={handleClick}>Klick mich</button>;
}

🚫 Standardverhalten verhindern (preventDefault)

function App() {
  const handleSubmit = (e) => {
    e.preventDefault(); // Verhindert Seitenneuladen
    alert('Formular gesendet!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Senden</button>
    </form>
  );
}

🛑 Event-Bubbling stoppen (stopPropagation)

function App() {
  const handleInnerClick = (e) => {
    e.stopPropagation(); // Verhindert, dass das äußere Element das Event empfängt
    alert('Inneres Element geklickt');
  };

  const handleOuterClick = () => {
    alert('Äußeres Element geklickt');
  };

  return (
    <div onClick={handleOuterClick} style={{ padding: '20px', backgroundColor: 'lightblue' }}>
      <button onClick={handleInnerClick}>Klick mich</button>
    </div>
  );
}

---

7.4 Formular-Bindung (Controlled Components)

📝 Was sind Controlled Components?

In React werden Formularelemente durch State gesteuert (nicht durch das DOM).

function App() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={name} 
        onChange={handleChange} 
      />
      <button type="submit">Senden</button>
    </form>
  );
}

Wichtig:

• value={name}: Wert aus State
• onChange={handleChange}: Aktualisiert State bei Eingabe

---

7.5 Verschiedene Formularelemente

1️⃣ Textfeld (input text)

function App() {
  const [text, setText] = useState('');

  return (
    <input 
      type="text" 
      value={text} 
      onChange={(e) => setText(e.target.value)} 
    />
  );
}

2️⃣ Checkbox

function App() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <input 
      type="checkbox" 
      checked={isChecked} 
      onChange={(e) => setIsChecked(e.target.checked)} 
    />
  );
}

3️⃣ Radio-Buttons

function App() {
  const [gender, setGender] = useState('male');

  return (
    <div>
      <input 
        type="radio" 
        name="gender" 
        value="male" 
        checked={gender === 'male'} 
        onChange={(e) => setGender(e.target.value)} 
      /> Männlich
      
      <input 
        type="radio" 
        name="gender" 
        value="female" 
        checked={gender === 'female'} 
        onChange={(e) => setGender(e.target.value)} 
      /> Weiblich
    </div>
  );
}

4️⃣ Dropdown (select)

function App() {
  const [city, setCity] = useState('berlin');

  return (
    <select value={city} onChange={(e) => setCity(e.target.value)}>
      <option value="berlin">Berlin</option>
      <option value="munich">München</option>
      <option value="hamburg">Hamburg</option>
    </select>
  );
}

5️⃣ Textarea

function App() {
  const [text, setText] = useState('');

  return (
    <textarea 
      value={text} 
      onChange={(e) => setText(e.target.value)} 
    />
  );
}

---

7.6 Mehrere Formularelemente verwalten

📦 Einzelne State-Variablen

function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <form>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
      />
      <input 
        type="email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />
      <input 
        type="password" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
      />
    </form>
  );
}

📦 Objekt als State (BESSER!)

function App() {
  const [form, setForm] = useState({
    name: '',
    email: '',
    password: ''
  });

  const handleChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  return (
    <form>
      <input 
        type="text" 
        name="name"
        value={form.name} 
        onChange={handleChange} 
      />
      <input 
        type="email" 
        name="email"
        value={form.email} 
        onChange={handleChange} 
      />
      <input 
        type="password" 
        name="password"
        value={form.password} 
        onChange={handleChange} 
      />
    </form>
  );
}

---

7.7 Uncontrolled Components (Nicht empfohlen)

📝 Was sind Uncontrolled Components?

Uncontrolled Components verwenden das DOM als Datenquelle (nicht State).

function App() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Name: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Senden</button>
    </form>
  );
}

Vergleich:

Controlled	Uncontrolled
Daten in State	Daten im DOM
Echtzeit-Validierung	Späte Validierung
Mehr Code	Weniger Code
EMPFOHLEN	Nur selten verwenden

---

📝 Zusammenfassung

In diesem Kapitel haben wir gelernt:

• ✅ Event-Bindung in React (camelCase)
• ✅ Event-Handler schreiben
• ✅ Event-Objekt verwenden (preventDefault, stopPropagation)
• ✅ Controlled Components (Formular-Bindung)
• ✅ Verschiedene Formularelemente (text, checkbox, radio, select)
• ✅ Mehrere Formularelemente verwalten

---

🎯 Nächste Schritte

Im nächsten Kapitel werden wir lernen:

• React Hooks im Detail (useEffect, useRef, useContext)
• Benutzerdefinierte Hooks erstellen

Bereit für Hooks? → Kapitel 8: React Hooks