In Schritten zählen
Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 24 von 42.
Die Setter-Funktion nimmt jeden neuen Wert an: Sie sind nicht auf +1 beschränkt. Addieren Sie 5, verdoppeln Sie ihn oder setzen Sie ihn auf Null zurück:
setPoints(points + 5);
setPoints(points * 2);
setPoints(0);Schaltflächen für verschiedene Beträge sind einfach verschiedene Handler auf demselben Zustand:
<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>
Aufgabe
EinfachEin Spiel gibt 5 Punkte pro Münze.
- Füge den State
pointshinzu, der bei 0 beginnt, und zeige ihn im Span mitid="points"an. - Der Button
Collect coin(id="coin") fügt 5 pro Klick hinzu.
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