النماذج المتحكم بها

تعلم كيفية التحكم بكل حقل من حقول النموذج من خلال حالة React لتتمكن من التحقق من البيانات وإرسالها بشكل موثوق.

8 دقيقة · 3 أسئلة

في React، يصبح النموذج قابلاً للتنبؤ عندما يكون كل حقل متحكماً به: القيمة المعروضة تأتي من حالة المكوّن، وكل ضغطة على المفاتيح تمر عبر onChange لتحديث تلك الحالة. لم يعد الـ DOM هو مصدر الحقيقة، بل حالتك هي المصدر. عملياً، تربط الخاصية value بمتغير حالة وتوفر معالجاً يستدعي دالة التحديث.

import { useState } from "react";

function EmailField() {
  const [email, setEmail] = useState("");

  return (
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

نادراً ما يحتوي النموذج الحقيقي على حقل واحد فقط. بدلاً من تكديس استدعاءات useState، اجمع القيم في كائن واحد واكتب معالجاً عاماً. يجب أن تطابق الخاصية name لكل حقل مفتاحاً من مفاتيح الكائن تماماً: فهذا ما يخبر المعالج بأي خاصية عليه تحديثها.

const [form, setForm] = useState({
  username: "",
  password: "",
});

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

يبقى الإرسال. افتراضياً، يعيد المتصفح تحميل الصفحة عند إرسال النموذج: استدعِ e.preventDefault() في أعلى معالج onSubmit لديك. كما أنه المكان المناسب للتحقق من البيانات قبل إرسالها، لأن حالة النموذج بأكملها متوفرة بين يديك بالفعل.

function handleSubmit(e) {
  e.preventDefault();
  if (form.username.trim() === "") {
    alert("Username is required.");
    return;
  }
  console.log("Submitting:", form);
}

return (
  <form onSubmit={handleSubmit}>
    <input
      name="username"
      value={form.username}
      onChange={handleChange}
    />
    <button type="submit">Create account</button>
  </form>
);

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ما الذي يُعرّف الحقل المتحكم به في React؟
   • قيمته مخزّنة في الـ DOM وتُقرأ عبر ref
   • قيمته تأتي من الحالة وكل ضغطة مفتاح تمر عبر onChange
   • يكون للقراءة فقط حتى يتم إرسال النموذج
   • يتحقق تلقائياً من البيانات التي تكتبها
2. تمرّر value={email} إلى <input> دون توفير onChange. ماذا يحدث؟
   • يتجمّد الحقل: لم يعد للكتابة أي تأثير
   • يعمل الحقل بشكل طبيعي، وتتولى React معالجة الإدخال بنفسها
   • ينهار المكوّن عند أول عرض
3. ما وظيفة e.preventDefault() في معالج onSubmit؟
   • منع إعادة تحميل الصفحة التي يطلقها الإرسال الأصلي للنموذج
   • مسح حقول النموذج تلقائياً
   • إيقاف انتشار الحدث نحو المكوّنات الأب
   • تعطيل التحقق الأصلي من HTML في المتصفح