Événements

Gestion des événements

React utilise des événements synthétiques (SyntheticEvent) qui wrappent les événements natifs du navigateur.

Syntaxe

// Passer une référence de fonction (pas d'appel !)
<button onClick={handleClick}>Clic</button>

// Arrow function inline (pour passer des arguments)
<button onClick={() => handleClick(id)}>Supprimer</button>

// Avec l'objet event
function handleClick(e) {
  e.preventDefault();  // Empêcher le comportement par défaut
  e.stopPropagation(); // Stopper la propagation
  console.log(e.target.value);
}

Événements courants

Délégation d'événement

// Gérer les clics de plusieurs enfants dans le parent
function Liste({ items, onDelete }) {
  return (
    <ul onClick={(e) => {
      const id = e.target.closest('li')?.dataset.id;
      if (id) onDelete(id);
    }}>
      {items.map(item => (
        <li key={item.id} data-id={item.id}>{item.nom}</li>
      ))}
    </ul>
  );
}