{"id":"l-rf-3-2","courseId":"react-fundamentals","lang":"ar","kind":"lesson","summary":"اربط الـ event handlers بالطريقة الصحيحة، ومرّر إليها الوسائط، واقرأ كائن الحدث، وتحكّم في انتشار الأحداث والسلوك الافتراضي، ومرّر المعالجات إلى الـ components الأبناء كـ props.","html":"

يتغيّر الـ state لأن شيئًا ما يحدث: نقرة، أو ضغطة مفتاح، أو إرسال نموذج. والتعامل مع الأحداث في React قريب من الـ DOM، مع بعض الأعراف التي تُبقي الـ components مقروءة، وفخّين يقع فيهما الجميع مرة على الأقل.

\n

مرّر الدالة، لا تستدعها

\n

تربط event handler (معالج الحدث) بتمرير دالة إلى prop مثل onClick:

\n
JSX
export default function ClearButton({ onClear }) {\n  function handleClick() {\n    onClear();\n  }\n\n  return <button onClick={handleClick}>Clear watched</button>;\n}
\n

الأقواس المعقوصة تحمل handleClick، أي الدالة نفسها. تحتفظ بها React وتستدعيها حين تقع النقرة. قارن:

\n
JSX
// Right: passes the function. React calls it on click.\n<button onClick={handleClick}>Clear watched</button>\n\n// Wrong: calls it immediately, during render.\n<button onClick={handleClick()}>Clear watched</button>
\n

النسخة الثانية تنفّذ handleClick في كل مرة يُرسم فيها الـ component، وتمرّر قيمتها المُرجعة (undefined) كمعالج. وإذا كانت الدالة تضبط state، فستحصل على حلقة لا نهائية توقفها React بالخطأ «Too many re-renders». حين ترى هذا الخطأ، ابحث عن أقواس استدعاء داخل onSomething={…}.

\n

تمرير الوسائط

\n

أغلب المعالجات في القوائم تحتاج إلى معرفة العنصر الذي نُقر عليه. غلّف الاستدعاء بـ arrow function:

\n
JSX
{movies.map((movie) => (\n  <li key={movie.id}>\n    {movie.title}\n    <button onClick={() => onRemove(movie.id)}>Remove</button>\n  </li>\n))}
\n

تُنشأ الـ arrow function أثناء الـ render لكنها لا تُنفَّذ إلا عند النقر، وحين تُنفَّذ تستدعي onRemove بالمعرّف الصحيح. إنشاء دالة صغيرة لكل عنصر أمر طبيعي ورخيص؛ لا تلوِ كودك لتتجنّبه.

\n

المعالجات كـ props

\n

الـ components التي تملك state تمرّر المعالجات إلى الأسفل، ويستدعيها الأبناء ليبلّغوا بما حدث. والأعراف تجعل هذا مقروءًا:

\n\n
src/App.jsx
export default function App() {\n  const [movies, setMovies] = useState(INITIAL_MOVIES);\n\n  function handleRemove(id) {\n    setMovies(movies.filter((m) => m.id !== id));\n  }\n\n  return <MovieList movies={movies} onRemove={handleRemove} />;\n}
\n

لا يعرف MovieList شيئًا عن طريقة الحذف. كل ما يعرفه أنه حين ينقر المستخدم Remove، يستدعي onRemove(id). ويبقى الـ state، وقواعد تغييره، في مكان واحد.

\n

كائن الحدث

\n

تستدعي React معالجك مع كائن حدث. إنه يغلّف الحدث الأصلي في المتصفّح، وله الواجهة المألوفة نفسها في كل متصفّح:

\n
JSX
function handleKeyDown(e) {\n  if (e.key === 'Escape') {\n    setSelectedId(null);\n  }\n}\n\n<main onKeyDown={handleKeyDown}>…</main>
\n

الخصائص التي ستستخدمها أكثر من غيرها هي e.target (العنصر الذي بدأ منه الحدث)، وe.currentTarget (العنصر الذي يعمل معالجه الآن)، وe.key لأحداث لوحة المفاتيح، ودالتان: e.preventDefault() وe.stopPropagation().

\n

الانتشار والسلوك الافتراضي

\n

الأحداث تنتشر صعودًا (bubbling): النقرة على زر داخل بطاقة تُطلق معالج الزر، ثم معالج البطاقة، ثم معالج أي سلف. ولهذا يلتقط onKeyDown الموجود على <main> أعلاه ضغطة Escape حين يكون التركيز على أي زر بداخله. في الغالب يكون الانتشار ما تريده، لكن ليس دائمًا:

\n
JSX
<article onClick={() => onOpen(movie.id)}>\n  <h2>{movie.title}</h2>\n  <button\n    onClick={(e) => {\n      e.stopPropagation();\n      onRemove(movie.id);\n    }}\n  >\n    Remove\n  </button>\n</article>
\n

من دون stopPropagation، سيفتح النقر على Remove تفاصيل الفيلم أيضًا. (جعل البطاقة كلها هدفًا للنقر راحة لمستخدمي الفأرة؛ فاحتفظ بزر أو رابط حقيقي لفتح التفاصيل أيضًا، حتى يصل إليها مستخدمو لوحة المفاتيح.) احتفظ بهذا النمط للحالات التي تحتاجه؛ فاللجوء إليه في كل مكان يجعل تدفّق الأحداث صعب المتابعة.

\n

أمّا preventDefault فمختلفة: إنها توقف السلوك المدمج في المتصفّح، مثل انتقال رابط، أو إعادة تحميل الصفحة عند إرسال نموذج. ولا توقف الانتشار. ستستخدمها في نموذج Watchlist في الدرس التالي.

\n\n

المعالجات هي مكان الآثار الجانبية

\n

يجب أن تكون الـ components نقية أثناء الـ render، لكن معالجات الأحداث لا تعمل أثناء الـ render. إنها تعمل لأن المستخدم فعل شيئًا، فهي المكان الصحيح للآثار الجانبية (side effects): ضبط الـ state، والكتابة في localStorage، وإرسال طلب، وتسجيل التحليلات. وحين لا تكون متأكّدًا أين يجب أن يعيش كود ما، اسأل: «ما الذي تسبّب فيه؟» إذا كان الجواب إجراءً محدّدًا من المستخدم، فمكانه معالج ذلك الإجراء.

\n\n

في الدرس التالي تتعامل مع أهم حدث في Watchlist، وهو إرسال النموذج الذي يضيف فيلمًا، وتتعلّم كيف تُبقي الـ controlled inputs حقول النموذج والـ state متزامنين.

\n","toc":[{"id":"sec-1","text":"مرّر الدالة، لا تستدعها","level":2},{"id":"sec-2","text":"تمرير الوسائط","level":2},{"id":"sec-3","text":"المعالجات كـ props","level":2},{"id":"sec-4","text":"كائن الحدث","level":2},{"id":"sec-5","text":"الانتشار والسلوك الافتراضي","level":2},{"id":"sec-6","text":"المعالجات هي مكان الآثار الجانبية","level":2}],"takeaways":["مرّر دالة إلى onClick، مثل onClick={handleClick}؛ أمّا كتابة handleClick() فتستدعيها أثناء الـ render.","لتمرير وسيط، غلّف الاستدعاء بـ arrow function، مثل onClick={() => onRemove(movie.id)}.","تستقبل المعالجات كائن حدث فيه target وkey وpreventDefault() وstopPropagation().","سمِّ المعالجات داخل الـ component بالشكل handleX، وسمِّ الـ callback props بالشكل onX، ليُقرأ تدفّق البيانات بوضوح.","استخدم عناصر <button> حقيقية للأشياء القابلة للنقر، حتى يستطيع مستخدمو لوحة المفاتيح والـ screen reader استخدامها أيضًا."],"further":[{"title":"Responding to Events","url":"https://react.dev/learn/responding-to-events"},{"title":"Common components (React event object)","url":"https://react.dev/reference/react-dom/components/common#react-event-object"},{"title":"Event bubbling (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling"}],"quiz":[{"q":"

الكود <button onClick={setSelectedId(movie.id)}>Select</button> يُسقط التطبيق بالخطأ «Too many re-renders». لماذا؟

","options":[{"text":"يُستدعى الـ setter أثناء الـ render، فيُطلق render آخر، يستدعيه مجددًا، إلى ما لا نهاية.","why":"صحيح. الأقواس المعقوصة تحتوي على استدعاء، فيُنفَّذ أثناء الـ render. اكتب onClick={() => setSelectedId(movie.id)} لتمرّر دالة بدلًا من ذلك."},{"text":"لا تقبل onClick إلا الدوال المعرّفة بالكلمة function.","why":"أي دالة تعمل، بما فيها الـ arrow functions. المشكلة أن هذا ليس دالة أصلًا؛ إنه نتيجة استدعاء."},{"text":"الأزرار لا تستطيع تغيير الـ state؛ النماذج وحدها تستطيع.","why":"أي event handler يستطيع ضبط الـ state. ونقرة الزر هي الطريقة الأكثر شيوعًا لذلك."}],"answer":0},{"q":"

يستقبل MovieItem الـ prop المسمّى onRemove من أبيه. والدالة removeMovie(id) في الأب تتوقّع معرّف فيلم. أيّ سطر صحيح داخل MovieItem؟

","options":[{"text":"<button onClick={onRemove}>Remove</button>","why":"تستدعي React الدالة onRemove مع حدث النقر، فيستقبل الأب كائن حدث بدل المعرّف."},{"text":"<button onClick={onRemove(movie.id)}>Remove</button>","why":"هذا يستدعي onRemove أثناء الـ render ويحذف الفيلم فورًا، قبل أن ينقر أحد."},{"text":"<button onClick={() => onRemove(movie.id)}>Remove</button>","why":"صحيح. تُنفَّذ الـ arrow function عند النقر وتستدعي onRemove بالوسيط الذي يتوقّعه الأب بالضبط."},{"text":"<button onRemove={movie.id}>Remove</button>","why":"عناصر الـ DOM لا تعرف شيئًا عن onRemove. وحدها الأحداث الحقيقية مثل onClick تُربط."}],"answer":2},{"q":"

لبطاقة فيلم onClick={openDetails}، وبداخلها زر Remove له onClick={() => onRemove(movie.id)}. النقر على Remove يفتح التفاصيل أيضًا. ما الإصلاح؟

","options":[{"text":"استدعِ e.preventDefault() في معالج Remove.","why":"توقف preventDefault الإجراء الافتراضي للمتصفّح، مثل إرسال نموذج. لكنها لا توقف انتشار النقرة صعودًا إلى البطاقة."},{"text":"استدعِ e.stopPropagation() في معالج Remove قبل استدعاء onRemove.","why":"صحيح. تنتشر النقرة من الزر إلى البطاقة، وstopPropagation توقفها عند الزر."},{"text":"انقل زر Remove إلى خارج الـ component.","why":"هذا ينجح بصريًا فقط إن سمح التخطيط بذلك، وهو يتجنّب المشكلة بدل أن يفهمها."},{"text":"استخدم onMouseDown على زر Remove بدلًا من ذلك.","why":"يظل معالج النقر في البطاقة يعمل عند النقر، والأحداث الخاصة بالفأرة وحده تكسر الاستخدام بلوحة المفاتيح."}],"answer":1},{"q":"

لماذا يجب أن يكون عنوان الفيلم القابل للنقر <button> بدلًا من <div onClick={…}>؟

","options":[{"text":"الـ onClick على div لا يعمل إلا في React 18 وما قبلها.","why":"يعمل onClick على أي عنصر في كل إصدارات React. المشكلة فيما يقدّمه العنصر للمستخدمين."},{"text":"الأزرار تُرسم أسرع من الـ divs.","why":"سرعة الرسم متساوية. الفرق في السلوك المدمج وإمكانية الوصول."},{"text":"تحذّر React من معالجات النقر على الـ divs وترفض تشغيلها.","why":"لا ترفض React؛ النقرة تعمل بالفأرة. مستخدمو لوحة المفاتيح والتقنيات المساعدة هم من يُتركون خارجًا."},{"text":"الزر يقبل التركيز، ويعمل مع Enter وSpace، ويعلنه الـ screen reader كزر؛ والـ div لا يفعل شيئًا من ذلك.","why":"صحيح. ستضطر إلى إضافة role وtabIndex ومعالجات مفاتيح إلى الـ div لتحصل على ما يعطيك إياه الزر مجانًا."}],"answer":3}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"import { useState } from 'react';\n\nconst INITIAL = [\n { id: 'a1', title: 'Arrival' },\n { id: 'p2', title: 'Past Lives' },\n { id: 'd3', title: 'Dune: Part Two' },\n];\n\nfunction MovieItem({ movie, onSelect, onRemove }) {\n return (\n
  • \n \n \n
    • \n );\n}\n\nexport default function App() {\n const [movies, setMovies] = useState(INITIAL);\n const [selectedId, setSelectedId] = useState(null);\n const selected = movies.find((m) => m.id === selectedId);\n\n function handleRemove(id) {\n setMovies(movies.filter((m) => m.id !== id));\n }\n\n // Clear the selection when Escape is pressed anywhere inside
    \n\n return (\n
    \n

    Selected: {selected ? selected.title : 'none'}

    \n \n
    \n );\n}\n"},"solution":{"jsx":"import { useState } from 'react';\n\nconst INITIAL = [\n { id: 'a1', title: 'Arrival' },\n { id: 'p2', title: 'Past Lives' },\n { id: 'd3', title: 'Dune: Part Two' },\n];\n\nfunction MovieItem({ movie, onSelect, onRemove }) {\n return (\n
  • \n \n \n
    • \n );\n}\n\nexport default function App() {\n const [movies, setMovies] = useState(INITIAL);\n const [selectedId, setSelectedId] = useState(null);\n const selected = movies.find((m) => m.id === selectedId);\n\n function handleRemove(id) {\n setMovies(movies.filter((m) => m.id !== id));\n }\n\n function handleKeyDown(e) {\n if (e.key === 'Escape') {\n setSelectedId(null);\n }\n }\n\n return (\n
    \n

    Selected: {selected ? selected.title : 'none'}

    \n \n
    \n );\n}\n"},"checks":[{"id":"select","test":"const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); await click(row('Past Lives').querySelector('.title')); return text('#selected') === 'Selected: Past Lives';"},{"id":"remove","test":"const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); await click(row('Arrival').querySelector('.remove')); return $$('li').length === 2 && !row('Arrival') && text('#selected') === 'Selected: Past Lives';"},{"id":"remove-selected","test":"const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); await click(row('Past Lives').querySelector('.remove')); return $$('li').length === 1 && text('#selected') === 'Selected: none';"},{"id":"escape","test":"const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); await click(row('Dune: Part Two').querySelector('.title')); if (text('#selected') !== 'Selected: Dune: Part Two') return false; await press(row('Dune: Part Two').querySelector('.title'), 'Escape'); return text('#selected') === 'Selected: none';"}],"title":"التحديد والحذف وEscape","prompt":"

    النقر على عنوان فيلم يحدّده. لكن شيئين ناقصان:

    \n
      \n
    1. زر Remove لا يحذف شيئًا. الدالة handleRemove(id) في App تتوقّع معرّف فيلم؛ أصلح طريقة استدعاء MovieItem للدالة onRemove.
      2. \n
    2. الضغط على Escape بينما التركيز في أي مكان داخل <main> يجب أن يلغي التحديد، فيصبح نص #selected هو Selected: none.
      3. \n
    \n

    وحين يُحذف الفيلم المحدَّد، يجب أن يعرض التحديد none أيضًا. (انظر إلى طريقة حساب selected قبل أن تضيف أي كود لهذا.)

    \n","hints":["حاليًا يعني onClick={onRemove} أن React تستدعي onRemove(event). غلّفه بـ arrow function لتمرّر movie.id.","أحداث لوحة المفاتيح تنتشر صعودًا. معالج onKeyDown واحد على <main> يرى Escape المضغوط على أي زر بداخله.","في المعالج، تحقّق من e.key === 'Escape' واستدعِ setSelectedId(null)."],"explanation":"

    الكود onClick={onRemove} يسلّم React دالة تستدعيها مع حدث النقر، فاستقبلت handleRemove حدثًا بدل المعرّف ولم تُصفِّ شيئًا. أمّا () => onRemove(movie.id) فتمرّر بالضبط الوسيط الذي يتوقّعه الأب. ويعمل Escape من معالج واحد على <main> لأن أحداث keydown تنتشر صعودًا من الزر الذي عليه التركيز. وحذف الفيلم المحدَّد لا يحتاج إلى كود إضافي: selected مشتقّة باستخدام find، فبمجرّد اختفاء الفيلم تصبح قيمتها undefined ويرجع النص إلى “none”.

    \n","checkLabels":{"select":"النقر على “Past Lives” يحدّده","remove":"زر Remove يحذف Arrival ويُبقي التحديد","remove-selected":"حذف الفيلم المحدَّد يعيد التحديد إلى none","escape":"زر Escape يلغي التحديد"}},"words":616,"readMinutes":4}