التعامل مع الأحداث

معالجة الأحداث

في React نكتب اسم الحدث بصيغة camelCase ونمرّر له دالة (لا استدعاءً):

function Button() {
  function handleClick() {
    alert("تم الضغط!");
  }

  return <button onClick={handleClick}>اضغطني</button>;
}

💡 نمرّر handleClick (بلا أقواس). لو كتبنا handleClick() ستُنفَّذ فورًا عند الرسم، وهذا خطأ شائع.

الأحداث الشائعة

الحقول المتحكَّم بها (Controlled Inputs)

نربط قيمة الحقل بالحالة، فيصبح React هو "مصدر الحقيقة":

import { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>مرحبًا {name}</p>
    </div>
  );
}

• value={name} يربط الحقل بالحالة.
• onChange يحدّث الحالة عند كل ضغطة مفتاح.
• e.target.value هو النص الذي كتبه المستخدم.

🎯 التالي: عرض القوائم والمفاتيح (keys).