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
EinfachErstelle eine Bio-Box mit einem Live-Längenmesser.
- Mache das Input-Feld (
id="bio") steuerbar (controlled) mit dembio-State (beginne leer). - Der Absatz (
id="length") zeigtN characters, 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 selbstDiese 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 KomponenteDie Regel des einen Eltern-ElementsJSX ist nicht HTMLZusammenfassung: Lerne React kennen