Controlled Components
Controlled component, EK, FORM, ELEMENT (input, textarea, select) hai, JISKI, VALUE, React, STATE, SE, CONTROL, HOTI, hai — value PROP, aur, onChange, HANDLER, DONO, ZAROORI, HAIN. React, "SINGLE, SOURCE, OF, TRUTH" (STATE) SE, INPUT, KI, VALUE, DETERMINE, KARTA, hai.
YE, PATTERN, REAL-TIME, VALIDATION, CONDITIONAL, DISABLING, (jaise, SUBMIT, BUTTON, DISABLE, KARNA, JAB, TAK, FORM, VALID, NA, HO), aur, FORMATTED, INPUT, (jaise, PHONE, NUMBER, MASKING) POSSIBLE, BANATA, hai.
function LoginForm() {
const [email, setEmail] = React.useState("");
const [password, setPassword] = React.useState("");
return (
<form>
<input
type="email"
value={email} // STATE se, controlled
onChange={e => setEmail(e.target.value)} // input, STATE update karta hai
/>
<input
type="password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
<button disabled={!email || !password}>Login</button>
</form>
);
}- Controlled component = value, React STATE se, CONTROLLED, onChange, se, UPDATED
- "Single source of truth" = state, DETERMINE, KARTA, hai, input, ki, value
- Real-time validation, conditional, DISABLING, ENABLE, karta hai
<select>, aur, checkbox, inputs, bhi, "CONTROLLED" ho, SAKTE, HAIN — select, KE, LIYE, value, PROP, USE, HOTA, hai. Checkbox, KE, LIYE, checked, PROP, (value, KE, BAJAYE) USE, HOTA, hai, kyunki, WOH, boolean, hai.
<input type="checkbox" checked={isSubscribed} onChange={e => setIsSubscribed(e.target.checked)} />
<select value={country} onChange={e => setCountry(e.target.value)}>
<option value="in">India</option>
</select>Search, INPUTS, MEIN, HAR, KEYSTROKE, PAR, API, CALL, KARNA, WASTEFUL, hai — DEBOUNCING, (setTimeout, SE, YA, LIBRARIES, SE) API, CALL, KO, TAB, TAK, DELAY, KARTA, hai, JAB, TAK, USER, TYPING, ROK, NA, DE, EK, CERTAIN, TIME, TAK.