La gestión de eventos en React

La gestión de eventos en React es similar a la del DOM, pero con algunas diferencias importantes. React utiliza un sistema de eventos sintéticos para optimizar el rendimiento y garantizar la coherencia entre navegadores.

Los eventos básicos

Gestión de clics

function Button() {
  const handleClick = (event) => {
    console.log('Bouton cliqué !');
    // event est un événement synthétique React
  };

  return <button onClick={handleClick}>Cliquez-moi</button>;
}

Eventos del formulario

function LoginForm() {
  const handleSubmit = (event) => {
    event.preventDefault(); // Empêche le rechargement de la page
    console.log('Formulaire soumis');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Connexion</button>
    </form>
  );
}

Los eventos sintéticos

React encapsula los eventos del navegador en eventos sintéticos para:

1. Garantizar la coherencia entre navegadores
2. Optimizar el rendimiento
3. Gestionar el batching de las actualizaciones

Ejemplo de uso

function EventExample() {
  const handleMouseEnter = (event) => {
    // event est un événement synthétique
    console.log('Type d\'événement:', event.type);
    console.log('Cible:', event.target);
    console.log('Position:', event.clientX, event.clientY);
  };

  return (
    <div onMouseEnter={handleMouseEnter}>
      Survolez-moi
    </div>
  );
}