ステップ単位のカウント
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 24/42。
セッターはあらゆる新しい値を受け取ります。+1 に制限されるわけではありません。5 を加えたり、2 倍にしたり、ゼロにリセットしたりできます:
setPoints(points + 5);
setPoints(points * 2);
setPoints(0);異なる額のボタンは、同じ状態に対する異なるハンドラーにすぎません：
<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>
チャレンジ
簡単ゲームではコイン1枚につき5ポイント獲得できます。
- 初期値0の
pointsステートを追加し、id="points"の span 内に表示します。 Collect coinボタン（id="coin"）はクリックごとに 5 加算します。
自分で試してみよう
<!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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。