React/forms

تعمل عناصر الحقول (forms) بشكلٍ مختلفٍ قليلًا عن بقيّة عناصر DOM الأخرى في React بسبب احتفاظ عناصر الحقول بشكل طبيعي بحالة داخلية خاصّة بها. فمثلًا يقبل هذا الحقل في HTML اسمًا واحدًا:

<form>
  <label>
    الاسم:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="تقديم البيانات" />
</form>

يمتلك هذا الحقل نفس السّلوك الافتراضي لحقول HTML من حيث الانتقال إلى صفحة جديدة عندما يضغط المستخدم على زر تقديم البيانات (Submit)، وإن أردت فقط هذا السّلوك في React فسيعمل بشكل جيّد معك، ولكن في معظم الأحيان من الملائم أكثر أن نمتلك دالة في JavaScript تتعامل مع تقديم البيانات ولديها الوصول إلى البيانات التي أدخلها المستخدم في الحقل. الطريقة القياسيّة لتحقيق هذا الأمر هي باستخدام تقنيّة تدعى المُكوِّنات المُنضبِطَة (controlled components).