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
Gestione ciclo di vita in .NET Aspire
Change tracking e composition in Entity Framework
Applicare un filtro per recuperare alcune issue di GitHub
Migliorare l'organizzazione delle risorse con Azure Policy
Gestire progetti NPM in .NET Aspire
Utilizzare WebJobs su Linux con Azure App Service
Evitare memory leaks nelle closure JavaScript
Configurare e gestire sidecar container in Azure App Service
Ridurre il reflow ottimizzando il CSS
Utilizzare DeepSeek R1 con Azure AI
Testare il failover sulle region in Azure Storage
Rendere i propri workflow e le GitHub Action utilizzate più sicure
I più letti di oggi
- Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
- The Agentic Day - Milano
- .NET Conference Italia 2025 - Milano
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestione ciclo di vita in .NET Aspire