كائن حالة موحد لحقول النموذج | إدارة النماذج متعددة الحقول والتحقق من المدخلات

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عندما يتوسع نموذج التسجيل أو الدفع ليضم خمسة أو عشرة حقول، يصبح تعريف عشرة متغيرات useState() منفصلة وعشر دوال معالجة متشابهة عبئاً يضعف مقروئية المكون. الحل الهندسي النظيف هو جمع حقول النموذج المترابطة في كائن حالة واحد.

امنح كل حقل خاصية name مطابقة لمفتاحه في الكائن، واستخدم معالج تغيير موحداً يعتمد خاصية المفتاح المحسوب: setForm((prev) => ({ ...prev, [name]: nextValue })).

الصف 2 كود برمجي

HTML

function handleChange(e) {
  const { name, type, value, checked } = e.target;
  setForm((prev) => ({
    ...prev,
    [name]: type === 'checkbox' ? checked : value,
  }));
}

جرّب بنفسك

الصف 3 ملاحظة هامة

Single State Object for Forms كائن حالة موحد لحقول النموذج

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (إدارة النماذج متعددة الحقول والتحقق من المدخلات)