Ein Formular hält zunächst einen Entwurf. Beim Bestätigen wird daraus ein neuer Eintrag. Der State-Besitzer verwaltet diese Änderung. Ein Effect synchronisiert mit etwas außerhalb der React-Berechnung, hier dem Titel des Browserfensters. Diese Aufgaben sollten nicht vermischt werden. Die Eingabe wird in einer Aktion verarbeitet, der Fenstertitel in einem Effect.
01Die Oberfläche erweitern
Verwende das Projekt aus Tutorial 10 und ersetze src/App.tsx. value und onChange machen das Feld kontrolliert: React besitzt den angezeigten Text. label und htmlFor verbinden Feld und Beschriftung.
import React, { useEffect, useState } from 'react';
export function App() {
const [title, setTitle] = useState('');
const [entries, setEntries] = useState<string[]>([]);
const [error, setError] = useState('');
useEffect(() => {
const previous = document.title;
document.title = `Entries: ${entries.length}`;
return () => { document.title = previous; };
}, [entries.length]);
function submit(event: React.FormEvent) {
event.preventDefault();
const value = title.trim();
if (!value) { setError('Title required'); return; }
setEntries(old => [...old, value]);
setTitle(''); setError('');
}
return <main><h1>House notes</h1><form onSubmit={submit}>
<label htmlFor="title">Title</label>
<input id="title" value={title} onChange={event => setTitle(event.target.value)} />
<button>Add</button><p role="alert">{error}</p>
</form><ul>{entries.map((value, index) => <li key={index}>{value}</li>)}</ul></main>;
}
02Submit statt Rendern verwenden
preventDefault verhindert den normalen Seitenwechsel eines HTML-Formulars. Die Aktion normalisiert title und lehnt leeren Text ab. Die funktionale State-Aktualisierung erzeugt eine neue Liste und bewahrt alle vorhandenen Einträge.
03Einen Effect aufräumen
Die Abhängigkeit entries.length sagt, wann die Synchronisation neu nötig ist. Die zurückgegebene Funktion stellt den früheren Fenstertitel wieder her. Ein Effect braucht einen passenden Aufräumweg, wenn er externe Ressourcen oder Abonnements verändert.
04Entwurf und Daten unterscheiden
Nach erfolgreichem Submit leeren wir nur title und error. entries bleibt erhalten. Das ist weiterhin kein Datenbank-Commit. FlowForm Studio unterscheidet UI-Entwürfe, Serverzustand und Versionskonflikte ausdrücklich.
Leerzeichen erzeugen Title required. Roof erzeugt einen Listeneintrag und setzt den Fenstertitel auf Entries: 1.
Deine Übung
Ergänze dauerhaft eindeutige IDs für Listeneinträge. Warum reicht der Index bei späterem Löschen oder Umordnen nicht aus?
Lösung mit Erklärung anzeigen
Verwende Objekte mit id und title. Erzeuge die ID einmal in submit mit crypto.randomUUID und verwende key={entry.id}. Der Index ist nur im aktuellen, ausschließlich angehängten Lernbeispiel vertretbar. Bei Umordnung würde er die Identität mit der Position verwechseln.
Projektbezug und Quellen
Das Beispiel ist zum Lernen vereinfacht. Die verlinkte Codeversion zeigt die Anwendung im Projekt und die dortigen Prüfungen.