Gestione degli eventi: onClick e onChange

Obiettivo: gestire i clic e le modifiche al testo usando gli eventi sintetici di React, per un comportamento coerente tra i browser.

• onClick attiva le azioni
• onChange legge i valori degli input
• L'oggetto evento contiene i dettagli

Colleghi un gestore: onClick={handle}. Mantenga le funzioni brevi; aggiorni lo stato con i setter (preferibilmente con l'updater funzionale se utilizza il valore precedente).

onChange viene attivato quando l'utente modifica un input. Legga il testo da event.target.value e mantenga lo stato come unica fonte di verità.

Esempio: incrementare al clic, riflettere il valore dell'input con onChange e impedire il ricaricamento al submit del form con event.preventDefault().

Gli eventi sintetici avvolgono gli eventi nativi per garantire coerenza. Legga i valori all'interno del gestore e mantenga i gestori brevi e mirati.

• Utilizzi event.preventDefault() per i form
• Utilizzi event.target.value per gli input

Suggerimenti:

• Non modifichi direttamente il DOM; lasci che sia lo stato a guidare l'interfaccia.
• Eviti logiche complesse inline nei gestori: chiami funzioni brevi.
• Utilizzi l'updater funzionale quando usa lo stato precedente.

Riepilogo: utilizzi onClick per le azioni e onChange per gli input; legga i valori da event.target.value; impedisca il ricaricamento predefinito del form quando necessario.