Contare a incrementi
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 24 di 42.
Il setter accetta qualsiasi nuovo valore: non sei limitato a +1. Aggiungi 5, raddoppia il valore, reimposta a zero:
setPoints(points + 5);
setPoints(points * 2);
setPoints(0);I pulsanti per quantità diverse sono semplicemente gestori diversi sullo stesso stato:
<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>
Sfida
FacileUn gioco assegna 5 punti per ogni moneta.
- Aggiungi lo stato
pointscon valore iniziale 0 e mostrane il valore nello span conid="points". - Il pulsante
Collect coin(id="coin") aggiunge 5 a ogni clic.
Provalo tu
<!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>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Alla scoperta di React
Che cos’è React?Il tuo primo componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX5Stato ed eventi
Che cos'è lo stato?Contatore di clicContare a incrementiAttiva/disattiva con lo statoStato indipendenteRiepilogo: stato ed eventi