شرح صفوف ومحتوى الفقرة
في صفحات HTML التقليدية، يحتفظ كل عنصر نموذج مثل <input> بنصه الداخلي الخاص داخل شجرة المتصفح بمعزل عن شيفرتك. وعند بناء واجهات تفاعلية تعتمد فيها عدادات الأحرف أو معاينات البحث الفورية أو حالة زر الحفظ على النص المكتوب، يؤدي وجود ذاكرتين منفصلتين إلى تضارب القيم.
يعالج نمط الحقل المحكوم بالحالة (Controlled Component) هذه المشكلة بجعل حالة React المصدر الوحيد للحقيقة؛ إذ يقرأ الحقل قيمته من خاصية value، وتصب كل ضغطة مفتاح في تحديث تلك الحالة.
HTML
function BadgeDesigner() {
const [label, setLabel] = useState('UI Engineer');
return (
<div className="card">
<input
value={label}
onChange={(e) => setLabel(e.target.value)}
/>
<p>Live Badge: {label || 'Untitled'}</p>
</div>
);
}