Controlled और Uncontrolled Forms में अंतर
एक controlled input ऐसा है जैसे React pen पकड़े हो और exactly वही लिखे जो आप इसे कहें; एक uncontrolled input ऐसा है जैसे paper को खुद याद रखने देना कि क्या लिखा गया था।
In this page:
Syntax
// Controlled: React state owns the value
<input value={state} onChange={e => setState(e.target.value)} />
// Uncontrolled: the DOM owns the value
const inputRef = useRef();
<input defaultValue="initial" ref={inputRef} />
// read with inputRef.current.valueएक Input को 'Controlled' क्या बनाता है
एक input controlled होता है जब इसकी value prop React state से driven हो, और onChange उस state को update करे। इसका मतलब है React किसी भी moment पर box में क्या है इसका single source of truth है — displayed value हमेशा exactly state से match करती है।
Note:
Controlled inputs submit button को disable करना trivial बनाते हैं जब तक एक field valid न हो, क्योंकि आपके पास हमेशा state में current value है।
Warning:
एक controlled input को BOTH value और onChange चाहिए — onChange के बिना सिर्फ value input में type करना impossible बना देती है।
उदाहरण: What Makes an Input 'Controlled'
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [value, setValue] = React.useState("");
return <div><input value={value} onChange={e => setValue(e.target.value)} /><p>You typed: {value}</p></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>एक Input को 'Uncontrolled' क्या बनाता है
एक uncontrolled input अपनी internal value normal HTML तरीके से manage करता है, React से कोई value prop नहीं। इसकी current value पढ़ने के लिए, आप एक ref attach करते हैं और ref.current.value access करते हैं जब आपको असल में इसकी ज़रूरत हो, जैसे form submit पर।
Note:
एक uncontrolled input की starting content set करने के लिए defaultValue उपयोग करें (value नहीं), ताकि React इसे control करने की कोशिश न करे।
Warning:
हर render पर ref.current.value पढ़ना, सिर्फ submit पर पढ़ने के बजाय, uncontrolled input उपयोग करने का purpose defeat करता है।
उदाहरण: What Makes an Input 'Uncontrolled'
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const inputRef = React.useRef(null);
const handleClick = () => alert("Value: " + inputRef.current.value);
return <div><input ref={inputRef} defaultValue="Hello" /><button onClick={handleClick}>Read Value</button></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>दोनों Approaches के बीच चुनना
Controlled inputs आमतौर पर React में default choice हैं क्योंकि वे validation, formatting, और conditional UI को straightforward बनाते हैं।
Uncontrolled inputs simple forms के लिए, file inputs (जिन्हें control नहीं किया जा सकता), या एक non-React widget integrate करते समय useful हैं।
Note:
File inputs (<input type=file>) React में हमेशा uncontrolled होते हैं — security reasons के लिए इनकी value programmatically set नहीं की जा सकती।
Warning:
एक ही input पर renders के across दो styles mix न करें (कभी value pass करना, कभी नहीं) — React input types switch करने के बारे में एक warning log करेगा।
उदाहरण: Choosing Between the Two Approaches
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [controlled, setControlled] = React.useState("");
const uncontrolledRef = React.useRef(null);
return (
<div>
<input value={controlled} onChange={e => setControlled(e.target.value)} placeholder="Controlled" />
<input ref={uncontrolledRef} defaultValue="" placeholder="Uncontrolled" />
<p>Controlled value: {controlled}</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- एक input को इसकी lifetime के दौरान controlled से uncontrolled (या वापस) switch करना, जिसके बारे में React warn करता है।
- एक uncontrolled input की value हर render पर ref से पढ़ना, सिर्फ ज़रूरत होने पर (जैसे submit पर) पढ़ने के बजाय।
- एक uncontrolled input के लिए defaultValue न देना, इसे unexpectedly blank छोड़ते हुए।
चैप्टर सारांश
- एक controlled input की value React state से आती है और onChange के through update होती है।
- एक uncontrolled input अपनी value internally manage करता है; React इसे सिर्फ ज़रूरत होने पर एक ref के through पढ़ता है।
- Controlled inputs validation और conditional logic आसान बनाते हैं क्योंकि value हमेशा state में available होती है।
- Uncontrolled inputs बहुत basic forms या non-React code के साथ integrate करने के लिए simpler हैं।
ब्राउज़र सपोर्ट
कोई React-version restriction नहीं — refs और controlled inputs सभी supported React versions में identically काम करते हैं।
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: