Gli eventi svolgono un ruolo fondamentale nella creazione di interfacce utente interattive e dinamiche in React. In questo tutorial, esploreremo come gestire gli eventi React e rispondere alle azioni dell'utente in modo efficace.
Gestione degli eventi in JSX
React fornisce un sistema di eventi sintetico che avvolge gli eventi del browser nativo e li normalizza su diversi browser. Possiamo allegare gestori di eventi direttamente agli elementi JSX utilizzando l' onEventName attributo.
Esempio:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
Gestori di eventi e oggetti evento
Quando viene attivato un evento, React passa automaticamente un oggetto evento alla funzione di gestione dell'evento. Possiamo accedere a questo oggetto per ottenere ulteriori informazioni sull'evento, come l'elemento target, le coordinate del mouse, ecc.
Esempio:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
Gestori di eventi di associazione
Quando si passano gestori di eventi come oggetti di scena, è importante associarli all'istanza del componente. Ciò garantisce che this venga mantenuto il contesto corretto quando viene attivato l'evento.
Esempio:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
Propagazione degli eventi e prevenzione delle azioni predefinite
React utilizza un sistema di eventi sintetico che gestisce automaticamente la propagazione degli eventi. Per impedire il comportamento predefinito del browser, come l'invio di moduli o la navigazione di collegamenti, possiamo chiamare il event.preventDefault() metodo.
Esempio:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>Comprendendo come gestire gli eventi in React, puoi creare interfacce utente interattive e reattive che rispondono perfettamente alle azioni dell'utente
Ecco un elenco di eventi comuni in React
1. onClick: Questo evento si verifica quando si fa clic su un elemento.
Esempio:
<button onClick={handleClick}>Click Here</button> 2. onChange: Questo evento si verifica quando cambia il valore di un elemento di input(input, select, textarea).
Esempio:
<input type="text" onChange={handleChange} /> 3. onSubmit: Questo evento si verifica quando viene inviato un modulo. Esempio:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: Questo evento si verifica quando il puntatore del mouse entra in un elemento.
Esempio:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: Questo evento si verifica quando il puntatore del mouse lascia un elemento.
Esempio:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: Questo evento si verifica quando viene premuto un tasto.
Esempio:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: Questo evento si verifica al rilascio di un tasto.
Esempio:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: Questo evento si verifica quando un elemento riceve il focus.
Esempio:
<input type="text" onFocus={handleFocus} /> 9. onBlur: Questo evento si verifica quando un elemento perde il focus.
Esempio:
<input type="text" onBlur={handleBlur} /> 10. onScroll: Questo evento si verifica quando un elemento viene fatto scorrere.
Esempio:
<div onScroll={handleScroll}>Scrollable Content</div>
Questi sono solo alcuni esempi di eventi comuni in React. Puoi utilizzare questi eventi o creare eventi personalizzati in base alle tue esigenze nella tua React applicazione.