Controlled Input की Basics
एक controlled input एक text box है जो हमेशा exactly वही दिखाता है जो React उसे बताता है, अपनी own memory manage करने के बजाय।
In this page:
Syntax
const [value, setValue] = useState("");
<input value={value} onChange={(e) => setValue(e.target.value)} />
<input type="checkbox" checked={checked} onChange={(e) => setChecked(e.target.checked)} />एक Input को Controlled बनाना
एक input controlled बन जाता है जब इसकी value React state से आती है और इसका onChange handler उस same state को update करता है। यह एक loop बनाता है जहां React हर moment पर fully owns करता है कि input क्या display करता है, browser को independently manage करने देने के बजाय।
Note:
हमेशा एक controlled input की
value prop को एक onChange handler के साथ pair करें -- एक के बिना दूसरा problems का कारण बनता है।Warning:
सिर्फ
value set वाला और कोई onChange न वाला एक input read-only बन जाता है और एक console warning log करता है।उदाहरण: Making 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 NameField() {
const [name, setName] = React.useState("");
return (
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<NameField />);
</script>
</body>
</html>Controlled Value को कहीं और Read करना
चूंकि एक controlled input की value state में रहती है, इसे component में कहीं और use करना trivial है, जैसे user के type करते समय एक live preview दिखाना। यह immediate reactivity controlled pattern के main benefits में से एक है।
Note:
Controlled inputs instant validation feedback (जैसे एक character count दिखाना) आसान बनाते हैं क्योंकि value हमेशा state में available होती है।
Warning:
अगर आप onChange handler में state update करना भूल जाएं, field stuck दिखेगी और typing पर respond नहीं करेगी बिल्कुल।
उदाहरण: Reading the Controlled Value Elsewhere
<!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 LivePreview() {
const [text, setText] = React.useState("");
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
<p>Preview: {text}</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<LivePreview />);
</script>
</body>
</html>Controlled Checkboxes और Selects
Controlled pattern text inputs से आगे checkboxes (value के बजाय checked prop उपयोग करके) और select dropdowns (<select> खुद पर value उपयोग करके) तक extend होता है।
हर form element type की same controlled idea पर अपनी छोटी variation है।
Note:
Checkboxes
value/event.target.value के बजाय checked/onChange with event.target.checked उपयोग करते हैं।Warning:
एक controlled checkbox पर
checked के बजाय value उपयोग करना काम नहीं करता -- checkboxes को specifically boolean checked prop चाहिए।उदाहरण: Controlled Checkboxes and Selects
<!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 Preferences() {
const [subscribed, setSubscribed] = React.useState(false);
return (
<label>
<input
type="checkbox"
checked={subscribed}
onChange={(e) => setSubscribed(e.target.checked)}
/>
Subscribe: {subscribed ? "Yes" : "No"}
</label>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Preferences />);
</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. #}
आम गलतियां
- एक
onChangehandler provide किए बिना state से एक input कीvalueset करना, जो field में type करना impossible बनाता है। - same input पर controlled और uncontrolled patterns को mix करना (जैसे
valueset करना लेकिन change पर कभी state update न करना)। - यह भूल जाना कि first render पर
value={undefined}बाद में एक 'switching from uncontrolled to controlled' warning का कारण बनता है।
चैप्टर सारांश
- एक controlled input की value entirely React state से driven होती है।
valueprop औरonChangehandler input और state को sync रखने के लिए एक साथ काम करते हैं।- Controlled inputs input changes को instantly validate, transform, या react करना आसान बनाते हैं।
- यह React में form inputs handle करने का standard, recommended तरीका है।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- controlled inputs standard HTML form elements के ऊपर layered एक React pattern हैं।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: