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 ein Bio-Feld mit einer Längenanzeige in Echtzeit.
- Steuere das Eingabefeld (
id="bio") mit dem Zustandbio(zu Beginn leer). - Der Absatz (
id="length") zeigtN charactersan, 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