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
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Semplificare il deployment di siti statici con Azure Static Web App
Utilizzare il trigger SQL con le Azure Function
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Ottimizzazione dei block template in Angular 17
Verificare la provenienza di un commit tramite le GitHub Actions
Inizializzare i container in Azure Container Apps
Criptare la comunicazione con mTLS in Azure Container Apps
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Usare le variabili per personalizzare gli stili CSS
I più letti di oggi
- Cambiare la chiave di partizionamento di Azure Cosmos DB
- ASP.NET 2.0 per tutti
- Definire stili a livello di libreria in Angular
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- .NET Conference Italia 2023 - Milano e Online
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Ottimizzazione dei block template in Angular 17