TypeScript • المستوى الثالث • الدرس 3

معالجة الأحداث وحقول المدخلات (Typing Events & Forms)

أهداف الدرس العلمية

استخدام أنواع الأحداث المدمجة في React مثل React.ChangeEvent و React.FormEvent.
الوصول الآمن للخصائص الداخلية للحدث مثل e.target.name و e.target.value.
معالجة إرسال النماذج (Form Submission) مع منع السلوك الافتراضي e.preventDefault().
ربط حالة النموذج (Form State) بأنواع دقيقة لمنع إدخال بيانات غير صحيحة.

1. أنواع الأحداث المدمجة (Event Types)

توفر React أنواعاً جاهزة للأحداث الموجهة لعناصر HTML محددة، مثل HTMLInputElement و HTMLFormElement، لضمان وصول آمن للخصائص الداخلية للحدث بدون أخطاء.

tsx

// حدث تغيير حقل إدخال
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

// حدث إرسال نموذج
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault(); // ⛔ منع إعادة تحميل الصفحة
  console.log("تم الإرسال");
};

// حدث نقر زر
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  console.log("تم النقر على الزر");
};

2. معالج موحد لجميع الحقول

🎯 معالج واحد لعدة حقول

بدلاً من كتابة دالة لكل حقل، استخدم خاصية name في كل حقل وتحديث الحالة ديناميكياً:

setFormData(prev => ({ ...prev, [name]: value }))

🛡️ Form Event مع منع الافتراضي

دائماً استخدم e.preventDefault() في معالج onSubmit لمنع إعادة تحميل الصفحة التقليدية.

التطبيق العملي المباشر

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

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

أنشئ دالة باسم handleSubmit تقبل حدث React.FormEvent<HTMLFormElement>.
استخدم e.preventDefault() داخل الدالة لمنع السلوك الافتراضي.
غلف الحقول داخل وسم <form onSubmit={handleSubmit}> وأضف زر إرسال (type="submit").
اطبع بيانات النموذج formData بالكونسول ثم اضغط "تشغيل الكود".

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الرابع