El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com gestionar esdeveniments en React. Els esdeveniments en React són molt similars als esdeveniments en HTML, però hi ha algunes diferències importants que cal tenir en compte.

Conceptes clau

Esdeveniments sintètics: React crea un embolcall al voltant dels esdeveniments del navegador, anomenat SyntheticEvent, que funciona de manera consistent en tots els navegadors.
Manejadors d'esdeveniments: Els manejadors d'esdeveniments en React es defineixen com a funcions que es criden quan es produeix un esdeveniment.
Binding de 'this': Quan es defineixen manejadors d'esdeveniments en components de classe, és important assegurar-se que el context de 'this' estigui correctament vinculat.

Exemple pràctic

Exemple 1: Gestionar un esdeveniment de clic

A continuació, es mostra un exemple senzill de com gestionar un esdeveniment de clic en un botó:

import React from 'react';

class ClickButton extends React.Component {
  handleClick() {
    alert('Botó clicat!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Clica'm
      </button>
    );
  }
}

export default ClickButton;

Explicació del codi

Definició del component: Hem creat un component de classe anomenat ClickButton.
Manejador d'esdeveniments: Hem definit una funció handleClick que mostra una alerta quan es crida.
Assignació de l'esdeveniment: Hem assignat el manejador d'esdeveniments handleClick a l'esdeveniment onClick del botó.

Exemple 2: Gestionar esdeveniments en components funcionals

Els components funcionals utilitzen funcions per gestionar els esdeveniments. Aquí teniu un exemple:

import React from 'react';

const ClickButton = () => {
  const handleClick = () => {
    alert('Botó clicat!');
  };

  return (
    <button onClick={handleClick}>
      Clica'm
    </button>
  );
};

export default ClickButton;

Explicació del codi

Definició del component: Hem creat un component funcional anomenat ClickButton.
Manejador d'esdeveniments: Hem definit una funció handleClick dins del component que mostra una alerta quan es crida.
Assignació de l'esdeveniment: Hem assignat el manejador d'esdeveniments handleClick a l'esdeveniment onClick del botó.

Exercicis pràctics

Exercici 1: Gestionar un esdeveniment de canvi en un input

Crea un component que mostri un missatge cada vegada que l'usuari escrigui alguna cosa en un camp de text.

Solució

import React from 'react';

class InputChange extends React.Component {
  handleChange(event) {
    alert(`Input canviat a: ${event.target.value}`);
  }

  render() {
    return (
      <input type="text" onChange={this.handleChange} />
    );
  }
}

export default InputChange;

Exercici 2: Gestionar múltiples esdeveniments

Crea un component que tingui dos botons. Un botó ha de mostrar una alerta amb el missatge "Botó 1 clicat!" i l'altre amb el missatge "Botó 2 clicat!".

Solució

import React from 'react';

class MultipleButtons extends React.Component {
  handleButton1Click() {
    alert('Botó 1 clicat!');
  }

  handleButton2Click() {
    alert('Botó 2 clicat!');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleButton1Click}>Botó 1</button>
        <button onClick={this.handleButton2Click}>Botó 2</button>
      </div>
    );
  }
}

export default MultipleButtons;

Errors comuns i consells

Oblidar el binding de 'this': En components de classe, assegura't de vincular el context de 'this' als manejadors d'esdeveniments. Pots fer-ho al constructor o utilitzar funcions de fletxa.
No passar la funció directament: No cridis la funció directament en l'atribut de l'esdeveniment (per exemple, onClick={this.handleClick()}), sinó passa la referència de la funció (per exemple, onClick={this.handleClick}).

Resum

En aquesta secció, hem après com gestionar esdeveniments en React, tant en components de classe com en components funcionals. Hem vist exemples pràctics i hem realitzat exercicis per reforçar els conceptes apresos. Ara estem preparats per avançar cap a la renderització condicional en React.

Gestionar esdeveniments en React

Conceptes clau

Exemple pràctic

Exemple 1: Gestionar un esdeveniment de clic

Explicació del codi

Exemple 2: Gestionar esdeveniments en components funcionals

Explicació del codi

Exercicis pràctics

Exercici 1: Gestionar un esdeveniment de canvi en un input

Solució

Exercici 2: Gestionar múltiples esdeveniments

Solució

Errors comuns i consells

Resum

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa