ما الفرق بين المدخلات المضبوطة والمدخلات غير المضبوطة؟

Question

Accepted Answer

يتلخص الأمر في **من يكون مصدر الحقيقة لقيمة المدخل** — حالة React أم الـ DOM نفسه. ## المدخلات المضبوطة (React يمتلك القيمة) قيمة `value` للمدخل مدفوعة بالحالة، و `onChange` يحافظ على مزامنة الحالة. الـ DOM يعكس دائماً React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` لأن الحالة هي مصدر الحقيقة، يمكنك التحقق والتنسيق أو التحويل عند كل نقرة مفتاح (على سبيل المثال فرض الأحرف الكبيرة، تحديد الطول، تعطيل زر الإرسال). ## المدخلات غير المضبوطة (الـ DOM يمتلك القيمة) المتصفح يحتفظ بالقيمة؛ تقرأها فقط عند الحاجة عبر ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## متى تستخدم أياً منهما - **المضبوطة**: معظم النماذج — تحصل على التحقق وواجهة مستخدم شرطية ومصدر حقيقة واحد. العيب هو إعادة عرض واحدة لكل نقرة مفتاح (عادة ما تكون مهملة). - **غير المضبوطة**: النماذج البسيطة، مدخلات الملفات (`` دائماً غير مضبوطة)، أو دمج أدوات خارج React. كود أقل، لكن لا يمكنك الرد على التغييرات وهي تحدث. مزج الاثنين (تمرير `value` و `defaultValue` معاً) خطأ شائع وينشئ تحذير React.