Comptage par étapes
Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 24 sur 42.
Le setter accepte n'importe quelle nouvelle valeur : vous n'êtes pas limité à +1. Ajoutez 5, doublez-la, réinitialisez à zéro :
setPoints(points + 5);
setPoints(points * 2);
setPoints(0);Les boutons pour des montants différents sont simplement des gestionnaires différents sur le même état :
<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>
Défi
FacileUn jeu donne 5 points par pièce.
- Ajoutez l'état
pointsen le faisant démarrer à 0 et affichez-le dans le span avecid="points". - Le bouton
Collect coin(id="coin") ajoute 5 par clic.
Essayez vous-même
<!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>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Les fondamentaux
1Découvrez React
Qu'est-ce que React ?Votre premier composantRègle du parent uniqueJSX n'est pas de l'HTMLRécapitulatif : Découvrez React