Menu

Deutsch

Zeichenzähler

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

Da der Text ein State ist, können Sie bei jedem Rendering damit rechnen. Zeichenzähler im Tweet-Stil sind einzeilig:

<p>{message.length} characters</p>

Kein zusätzlicher State erforderlich: message.length wird vom vorhandenen State abgeleitet und bei jedem Tastenanschlag automatisch neu berechnet. Faustregel: Wenn Sie etwas aus bereits vorhandenem State berechnen können, speichern Sie es nicht im State.

Aufgabe

Einfach

Erstelle ein Bio-Feld mit einer Längenanzeige in Echtzeit.

Steuere das Eingabefeld (id="bio") mit dem Zustand bio (zu Beginn leer).
Der Absatz (id="length") zeigt N characters an, wobei N die aktuelle Länge der Bio ist (berechnet, nicht gespeichert).

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>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

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 spiegelnZeichenzählerLöschen-Button Zusammenfassung: Formulare & Eingaben

Prüfe deine Zählungen an beliebigem Text: Wörter- & Zeichenzähler