Menu

Tech

Deutsch

Zusammenfassung: Formulare & Eingaben

Teil des Abschnitts Grundlagen der React-Journey von Coddy. Lektion 32 von 42.

Aufgabe

Mittel

Zusammenfassung des Kapitels. Erstelle einen Spitznamenwähler mit der vollständigen Schleife für kontrollierte Eingaben: tippen, Live-Feedback beobachten, löschen.

Steuere das Eingabefeld (id="nick") mit dem Zustand nick, der zunächst leer ist.
Der Absatz (id="meter") zeigt N of 12, wobei N die aktuelle Länge des Spitznamens ist (z. B. beim Eingeben von Coddy → 5 of 12); der Wert wird abgeleitet und nicht gespeichert.
Die Schaltfläche id="clear" leert den Spitznamen und das Eingabefeld.

Probier es selbst

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Alle Lektionen in Grundlagen

1Lerne React kennen

Was ist React?Deine erste Komponente Die Regel des einen Eltern-Elements JSX ist nicht HTML Zusammenfassung: Lerne React kennen

4Props

Was sind Props?Props übergeben Zwei Props Gleiche Komponente, neue Daten Die Children-Prop Zusammenfassung: Props

7Bedingungen & Listen

Ternäres Rendern Anzeigen mit &&Eine Liste rendern Keys sind wichtig Erst filtern, dann mappen Zusammenfassung: Bedingungen & Listen

2JSX-Ausdrücke

Geschweifte Klammern Mathematik in Klammern Klammern in Attributen Funktionsaufrufe in JSX Zusammenfassung: JSX-Ausdrücke

5State & Events

Was ist State?Klick-Zähler In Schritten zählen Umschalten mit State Unabhängiger State Zusammenfassung: State & Events

8Projekt: Profilkarte

Schritt 1: Kartenstruktur Schritt 2: Karte mit Props Schritt 3: Like-Button Schritt 4: Umschalter zum Folgen

3Komponenten

Bausteine Deine zweite Komponente Komponenten wiederverwenden Eine Seite erstellen Zusammenfassung: Komponenten

6Formulare & Eingaben

Kontrollierte Eingaben Eingabe spiegeln Zeichenzähler Löschen-ButtonZusammenfassung: Formulare & Eingaben