شرح صفوف ومحتوى الفقرة
كثيراً ما يترك المستخدم مسافات فارغة في بداية النص أو نهايته قبل ضغط الإرسال؛ لذا نظّف النص عبر title.trim() داخل دالة الإرسال للتحقق من عدم فراغه، مع ترك الكتابة حرة داخل onChange حتى يتمكن المستخدم من كتابة المسافات بين الكلمات بسلاسة.
وبعد نجاح الحفظ، استدعِ دالة تحديث الحالة بنص فارغ مثل setTitle('') لتصفير الحقل فوراً واستقبال الإدخال التالي. يلخص الجدول التالي الفروق الأساسية:
| الجانب الهندسي | الحقل المحكوم في React | الحقل غير المحكوم التقليدي |
|---|---|---|
| مصدر الحقيقة للبيانات | حالة المكون عبر خاصية value={state} | الذاكرة الداخلية لعقدة المتصفح |
| آلية التحديث اللحظي | حدث onChange يستدعي دالة تحديث الحالة | يحدث المتصفح قيمة الحقل داخلياً بصمت |
| تصفير الحقل برمجياً | تمرير نص فارغ لدالة الحالة مباشرة | يتطلب استدعاء أوامر DOM يدوية |
| التنسيق والعدادات الحية | متاح تلقائياً في كل إعادة تصيير | يستلزم مستمعات أحداث وتعديلات يدوية |
function QuickTaskForm() {
const [task, setTask] = useState('');
const [items, setItems] = useState(['Learn useId']);
function handleSubmit(e) {
e.preventDefault();
if (!task.trim()) return;
setItems([...items, task.trim()]);
setTask('');
}
return <form onSubmit={handleSubmit}>...</form>;
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس بناء الحقول النصية ومساحات الكتابة المحكومة بالحالة كمصدر وحيد للحقيقة، وربط التسميات التوضيحية بأمان عبر خطاف useId، ومعالجة إرسال النماذج بحدث onSubmit مع تنظيف النص وتصفير الحقول. الخطوة التالية: انتقل الآن إلى الدرس رقم 23 «التعامل مع القوائم المنسدلة وخانات الاختيار في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.