Liczenie krokami
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 24 z 42.
Setter przyjmuje dowolną nową wartość: nie ograniczasz się do +1. Dodaj 5, podwój ją, wyzeruj:
setPoints(points + 5);
setPoints(points * 2);
setPoints(0);Przyciski dla różnych wartości to po prostu różne procedury obsługi tego samego stanu:
<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>
Wyzwanie
ŁatwyGra przyznaje 5 punktów za każdą monetę.
- Dodaj stan
pointszaczynający się od 0 i wyświetl go w elemencie span zid="points". - Przycisk
Collect coin(id="coin") dodaje 5 za każde kliknięcie.
Spróbuj swoich sił
<!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>
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Podstawy
1Poznaj React
Czym jest React?Twój pierwszy komponentZasada jednego rodzicaJSX to nie HTMLPodsumowanie: poznaj React