close

Gestione degli eventi in React- Una guida completa alla gestione degli eventi in React .js

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.