Quando creiamo un function component, non abbiamo a disposizione costruttori o altri metodi per inizializzare lo stato quindi dobbiamo utilizzare un'altra tecnica: gli hook. Nel caso specifico, il metodo useState è l'hook da utilizzare. Questo metodo accetta in input un valore che rappresenta il valore iniziale da dare a una variabile dello stato e resituisce in output un oggetto con una variabile che rappresenta lo stato e un metodo da invocare per modificare la variabile nello stato.
import React, { useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); } return ( <div> <p>Counter: {count}</p> <button onClick={handleClick}>Increment</button> </div> ); }
In questo esempio, importiamo il metodo useState da react e poi lo usiamo per inizializzare una variabile nello stato con valore zero. La chiamata al metodo torna un oggetto che tramite deconstruction riportiamo a delle variabili. La variabile count contiene il valore e viene aggiornata ogni volta che modifichiamo il suo valore tramite il metodo setCount.
Ovviamente, andando a modificare il valore dello stato, ogni chiamata a setCount causa il rendering del component.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Applicare un firewall web con Azure Front Door
Realizzare applicazioni desktop moderne
Renderizzare un PDF come immagine nella Universal Windows Platform
Realizzare applicazioni Windows con React Native
Serverless apps with Azure Functions v2 and .NET Core (.NET Conference Italia 2018)
Usare la dependency injection built-in nelle Azure Function
Gestire gli eventi dei servizi Azure mediante Event Grid
Ottimizzazione delle subquery in Entity Framework Core
Gestire le configurazioni con Azure App Configuration
Gestire lo stato all'interno di un class component di ReactJS
Utilizzare i fragment in JSX
Modificare il cursore del mouse nella Universal Windows Platform
I più letti di oggi
- Utilizzare la funzionalità ref all'interno di un component React
- Usare certificati Let's Encrypt con Azure Application Gateway
- DevOps in a .NET world
- Novità di Blazor Server su ASP.NET Core 3.1
- Building modern web apps with Blazor
- WPF and Windows Apps in .NET Core 3
- What's new in Xamarin and Visual Studio for macos