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

الحالة (State) بيانات يتذكرها المكون، وعندما تتغير تعيد React رسم الواجهة تلقائيًا.

أول عداد

useState(0) يرجع شيئين: القيمة الحالية، ودالة لتغييرها. لا تكتب count = 5 مباشرة، لأن React لن تعرف بالتغيير.

الأحداث

الأحداث بصيغة camelCase: onClick وonChange وonSubmit وonMouseEnter. وتمرر دالة، لا استدعاء: onClick={save} وليس onClick={save()}.

الحقل المتحكم به

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

التحديث بالقيمة السابقة

عندما تعتمد القيمة الجديدة على القديمة، الأضمن أن تمرر دالة:

جرّب استبدالها بـ setN(n + 1) ثلاث مرات، وستجد أنها تضيف 1 فقط. هذا سؤال شائع في المقابلات.

حالة على شكل كائن

...form تنسخ الكائن القديم ثم نغير حقلًا واحدًا. لا تعدّل الكائن نفسه.

تمرين

1. زر يبدّل بين الوضع الليلي والنهاري ويغير لون الخلفية.
2. حقل كلمة مرور مع زر «إظهار/إخفاء».