المشكلة: إدارة إدخال المستخدم بالطريقة الصعبة

النماذج هي أساس تفاعل المستخدم - سواءً كان المستخدمون يسجلون الدخول أو يرشحون نتائج البحث، يبدأ كل شيء إدخال المستخدم. في JavaScript التقليدية، نعتمد على الاستعلام عن كائنات DOM واستخراج القيم يدويًا، ولكن مع ازدياد عدد الحقول، تصبح صيانتها ومزامنتها فوضوية.

قبل أن نتعلم كيف يجعل React هذا الأمر سلسًا، دعنا نراجع كيفية إدارة بيانات نموذج بشكل تقليدي في HTML و JavaScript العاديين - ولماذا تنهار هذه العملية بسرعة.

المشكلة مع التعامل مع نموذج التقليدية

في JavaScript البسيط، يبدو إدارة قيم إدخال نموذج عادةً على هذا النحو:

يبدو الكود بسيطًا للوهلة الأولى، لكن العديد من المشكلات ...