الأحداث والتصيير الشرطي

تفاعل مع أفعال المستخدم واعرض أو أخفِ العناصر بناءً على شروط.

8 دقيقة · 3 أسئلة

الحدث هو فعل من المستخدم: نقرة، ضغطة مفتاح، إرسال نموذج... في React، تستمع إلى حدث بتمرير دالة إلى prop خاص: onClick للنقرات، onChange للكتابة، وهكذا. لاحظ صياغة camelCase: onClick بحرف C كبير، وليس onclick كما في HTML.

function AlertButton() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click here
    </button>
  );
}

الأداة الثانية في هذا الدرس هي التصيير الشرطي، أي عرض أشياء مختلفة تبعاً لشرط. مثل لافتة متجر تقرأ "مفتوح" أو "مغلق"، يمكن للمكوّن أن يختار ما يعرضه. الأداة الأكثر شيوعاً هي المُعامل الثلاثي (ternary): condition ? valueIfTrue : valueIfFalse، وهو طريقة مختصرة لكتابة "إذا... وإلا...".

function Status({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "Welcome!" : "Please sign in."}
    </p>
  );
}

وماذا عن عرض شيء أو لا شيء على الإطلاق؟ تستعمل المُعامل &&: في condition && element، لا يُعرض العنصر إلا إذا كان الشرط صحيحاً. إذا كان خاطئاً، يصيّر React ببساطة لا شيء، دون أي خطأ.

function Cart({ itemCount }) {
  return (
    <div>
      <h3>My cart</h3>
      {itemCount > 0 && <p>{itemCount} item(s)</p>}
    </div>
  );
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. أي prop تستعمل للتفاعل مع نقرة في React؟
   • onclick
   • onClick
   • clickEvent
2. لماذا تكتب onClick={handleClick} بدون أقواس؟
   • لأن الأقواس ممنوعة في JSX
   • لجعل الصفحة تُحمّل أسرع
   • لكي تُشغَّل الدالة عند النقر، وليس عند التصيير
3. ماذا يُعرض بواسطة {isVisible && <p>Info</p>} إذا كان isVisible يساوي false؟
   • لا شيء على الإطلاق
   • تُعرض فقرة Info على أي حال
   • يُظهر React رسالة خطأ