المدخلات المدارة

تثير مدخلات النصوص سؤالاً: يكتب المستخدم داخل الصندوق، لكن مكونك يمتلك حالة (state): فمن يمتلك النص؟ في React الإجابة هي: الحالة هي التي تمتلكه. يسمى ذلك إدخالاً محكومًا (controlled input):

const [name, setName] = useState('');

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

سلكان يشكلان حلقة التكرار:

• value={name}: يُظهر الصندوق دائماً الحالة
• onChange: كل ضغطة مفتاح تستدعي الدالة المحددة مع e.target.value، النص الحالي للصندوق

لذلك، يؤدي الكتابة إلى تحديث الحالة (state)، وتُعيد الحالة إعادة العرض (re-renders)، فيعرض الصندوق الحالة الجديدة. الفائدة: النص يعيش في متغير يمكنك التحقق من صحته، أو تحويله، أو مسحه، أو عرضه في أي مكان آخر على الصفحة.