معالجة الأحداث في React: التعامل مع النقر والإدخال

بعد أن فهمت State، يأتي السؤال الطبيعي: كيف نجعل الواجهة تتفاعل مع المستخدم؟ هنا نستخدم الأحداث (Events) مثل النقر والكتابة والتمرير.

React يجعل التعامل مع الأحداث بسيطًا ومباشرًا: تربط الحدث بدالة، وعند التفاعل ينفّذ الكود المطلوب فورًا.

ما هي الأحداث في React؟

الأحداث هي تفاعلات المستخدم مع الواجهة: ضغط زر، إدخال نص، تمرير الماوس. في React نستخدم خصائص مثل onClick و onChange لربط هذه التفاعلات بدوال JavaScript.

التعريف البسيط: الحدث هو فعل يقوم به المستخدم، والدالة هي الاستجابة لهذا الفعل.

مثال: التعامل مع onClick

function LikeButton() {
  function handleClick() {
    alert("تم تسجيل الإعجاب");
  }

  return <button onClick={handleClick}>أعجبني</button>;
}

هنا قمنا بربط زر بدالة handleClick. عند النقر تُنفَّذ الدالة ويظهر تنبيه.

لاحظ أننا كتبنا onClick={handleClick} بدون أقواس تشغيل. هذا يعني أننا نمرّر مرجع الدالة فقط، كي تعمل عند النقر وليس أثناء العرض. لو كتبنا onClick={handleClick()} فسيتم تشغيلها مباشرة عند تحميل المكوّن.

مثال: التعامل مع onChange في Input

import { useState } from "react";

function SearchInput() {
  const [query, setQuery] = useState("");

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="ابحث هنا"
    />
  );
}

كل مرة يكتب المستخدم حرفًا، يتغير query. هذا هو الأساس لأي نموذج أو حقل بحث.

ما يحدث هنا: الحدث onChange يسلّمنا كائن الحدث e. من خلال e.target.value نقرأ القيمة الحالية داخل الحقل، ثم نحدّث الـ State عبر setQuery لتتزامن الواجهة مع المدخل.

تمرير قيمة للدالة داخل الحدث

function DeleteButton({ id, onDelete }) {
  return (
    <button onClick={() => onDelete(id)}>حذف</button>
  );
}

استخدمنا دالة سهمية لتمرير id إلى الدالة. بدون ذلك لن نستطيع إرسال قيم إضافية.

السبب هو أن onDelete تحتاج معرفة أي عنصر سيتم حذفه. لذلك نغلفها بدالة صغيرة تُنفّذ عند النقر وتستدعي onDelete(id). هذا النمط شائع في القوائم والأزرار المرتبطة بعناصر محددة.

منع السلوك الافتراضي (preventDefault)

function LoginForm() {
  function handleSubmit(e) {
    e.preventDefault();
    alert("تم الإرسال بدون إعادة تحميل الصفحة");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="البريد" />
      <button type="submit">دخول</button>
    </form>
  );
}

افتراضيًا، إرسال النموذج يعيد تحميل الصفحة. باستخدام preventDefault نحافظ على تطبيق SPA سلس.

داخل handleSubmit نستخدم e.preventDefault() لإيقاف السلوك الافتراضي، ثم ننفّذ منطقنا الخاص مثل التحقق من البيانات أو إرسال طلب API.

أفضل الممارسات في Event Handling

• استخدم camelCase في أسماء الأحداث مثل onClick.
• مرّر الدالة نفسها بدل تنفيذها مباشرة.
• اجعل الدوال صغيرة وواضحة لتسهيل الصيانة.

أخطاء شائعة

• كتابة onclick بدل onClick.
• تنفيذ الدالة مباشرة داخل JSX مثل onClick={handleClick()}.
• نسيان preventDefault في النماذج.

الأسئلة الشائعة — FAQ

ما هي الأحداث في React؟

الأحداث هي تفاعلات المستخدم مثل النقر والكتابة، ونتعامل معها عبر خصائص مثل onClick.

هل أسماء الأحداث في React مثل HTML؟

نفس الفكرة لكن بصيغة camelCase مثل onClick و onChange.

كيف أمرر قيمة للدالة داخل onClick؟

استخدم دالة سهمية مثل onClick={() => handleDelete(id)}.

ما فائدة preventDefault في React؟

تمنع السلوك الافتراضي مثل إعادة تحميل الصفحة عند إرسال النموذج.

لماذا لا أكتب onClick={handleClick()}؟

لأنها ستعمل مباشرة عند العرض. الصحيح هو تمرير الدالة نفسها: onClick={handleClick}.