إدارة الأحداث في React

إدارة الأحداث في React مشابهة لإدارتها في DOM، لكن مع بعض الاختلافات المهمة. يستخدم React نظام أحداث اصطناعية (Synthetic Events) لتحسين الأداء وضمان اتساق السلوك بين المتصفحات.

الأحداث الأساسية

إدارة النقرات

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

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

أحداث النماذج

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>
  );
}

الأحداث الاصطناعية (Synthetic Events)

يغلّف React أحداث المتصفح داخل أحداث اصطناعية من أجل:

1. ضمان اتساق السلوك بين المتصفحات
2. تحسين الأداء
3. إدارة تجميع التحديثات (batching)

مثال على الاستخدام

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>
  );
}