کنٹرول شدہ اور غیر کنٹرول شدہ ان پٹ کے درمیان کیا فرق ہے؟

Question

Accepted Answer

یہ **ان پٹ کی قیمت کے لیے سچائی کا منبع کون ہے** — React state یا DOM خود۔ ## یہ کیوں اہم ہے ### کنٹرول شدہ (React قیمت کا مالک ہے) ان پٹ کی `value` state سے چلتی ہے، اور `onChange` state کو ہم آہنگ رکھتا ہے۔ DOM ہمیشہ React کو ظاہر کرتا ہے: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` چونکہ state سچائی کا منبع ہے، آپ ہر کلید دبانے پر تصدیق، فارمیٹنگ یا تبدیلی کر سکتے ہیں (مثلاً بڑے حروف پر مجبور کریں، لمبائی محدود کریں، جمع کریں بٹن غیر فعال کریں)۔ ### غیر کنٹرول شدہ (DOM قیمت کا مالک ہے) براؤزر قیمت رکھتا ہے؛ آپ اسے صرف ضرورت کے وقت ref کے ذریعے پڑھتے ہیں: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## کون سا کب استعمال کریں - **کنٹرول شدہ**: زیادہ تر فارمز — آپ کو تصدیق، مشروط UI، اور ایک ہی سچائی کا منبع ملتا ہے۔ نقصان ہر کلید دبانے پر دوبارہ رینڈر کرنا ہے (عام طور پر قابل غفلت)۔ - **غیر کنٹرول شدہ**: سادہ فارمز، فائل ان پٹس (`` ہمیشہ غیر کنٹرول شدہ ہے)، یا غیر React ونڈجٹس کو مربوط کرنا۔ کم کوڈ، لیکن آپ تبدیلیوں پر ردعمل نہیں دے سکتے۔ انہیں ملانا (`value` اور `defaultValue` دونوں بھیجنا) ایک عام غلطی ہے اور React انتباہ کو متحرک کرتا ہے۔