Riepilogo: stato ed eventi
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 27 di 42.
Sfida
MedioRiepilogo del capitolo. Crea un pannello di controllo per una lampada da scrivania: un contatore e un interruttore affiancati in un unico componente.
- Aggiungi due stati indipendenti:
brightnesscon valore iniziale0eoncon valore inizialefalse. - Mostra la luminosità nello span con
id="level". Il pulsanteid="brighter"aggiunge 1 a ogni clic. - Il pulsante
id="power"inverteon. Quando è attivo, mostra un<p>conid="status"e il testoLamp is on; altrimenti, restituiscinull.
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>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