All'interno di un component possiamo inserire qualunque tipo di oggetto HTML. Se vogliamo interagire con questi oggetti, dobbiamo sfruttare gli eventi che JSX ci mette a disposizione (che poi sono gli stessi che HTML mette a disposizione). Ad esempio, se vogliamo gestire il click su un pulsante dobbiamo gestire l'evento onClick.
È fondamentale sottolineare che gli eventi onclick e onClick sono diversi: il primo (con la lettera minuscola dopo 'on') rappresenta l'evento di default del browser, mentre il secondo (con la lettera maiuscola dopo 'on') rappresenta l'evento che ReactJS gestisce ed è quello che dobbiamo sempre utilizzare. L'esempio fatto con onClick vale ovviamente per qualunque altro tipo di evento.
Se creiamo un component tramite function, assegniamo all'evento una variabile che punta alla funzione che gestisce l'evento, se invece creiamo un component tramite class, allora assegnamo all'evento un metodo della classe facendo attenzione a passare il contesto tramite la funzione bind. Se non passiamo il contesto, assegnandogli il this, il metodo verrebbe invocato, ma il suo this sarebbe undefined quindi non potremmo accedere ad altri metodi e proprietà del component.
function MyComponent() { const handleClick = () => { alert('You clicked me'); } return ( <button onClick={handleClick}>Click me</button> ) } class MyComponent extends React.Component { handleClick() { alert('you clicked me'); } render() { return ( <button onClick={this.handleClick.bind(this)}>Click me</button> ) } }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottenere un token di accesso per una GitHub App
Fornire parametri ad un Web component HTML
Creare una libreria CSS universale: Clip-path
Utilizzare la funzione EF.Parameter per forzare la parametrizzazione di una costante con Entity Framework
Scrivere selettori CSS più semplici ed efficienti con :is()
Loggare le query più lente con Entity Framework
Creare agenti facilmente con Azure AI Agent Service
Utilizzare una qualunque lista per i parametri di tipo params in C#
Creare una libreria CSS universale: Cards
Utilizzare i variable font nel CSS
Migliorare l'organizzazione delle risorse con Azure Policy
Testare l'invio dei messaggi con Event Hubs Data Explorer
I più letti di oggi
- Community Night@Basta!Italia on tour 2009 - Milano
- Windows Phone 7.1 Mango: ecco i tool in beta
- Speciale Razor: il nuovo view engine di WebMatrix e ASP.NET MVC
- Disponibile l'SDK per Windows Phone 7.8
- SQL Server 2005 in beta 2
- Codifica all'avanguardia con .NET MAUI: Scopri le potenzialità di sviluppo multi-piattaforma
- Utilizzare WebAssembly con .NET, ovunque
- Gestire la configurazione di ASP.NET Core su più ambienti
- Calcolare il resto di una divisione
- Segnala questa pagina ad un amico