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
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Eseguire le GitHub Actions offline
Usare le collection expression per inizializzare una lista di oggetti in C#
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Effettuare il binding di date in Blazor
Reactive form tipizzati con FormBuilder in Angular
Utilizzare Model as a Service su Microsoft Azure
Utilizzare database e servizi con gli add-on di Container App
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
I più letti di oggi
- Elencare gli utenti di un dominio NT con ADSI
- Creare un messaggio di posta in diversi formati con ASP.NET 2.0
- Utilizzare SQL e #linq per eseguire una query con #entityframework Core https://aspit.co/bfv di @sm15455 #efcore1
- Utilizzare il metodo reduce in #javascript https://aspit.co/ccc di @morwalpiz
- Disponibile il codice sorgente di ASP.NET MVC
- rilasciati nuovi template per la #aspnet web pages. funzionano anche con #webmatrix: http://u.aspitalia.com/lu