Uncontrolled Components
Uncontrolled component, EK, FORM, ELEMENT, hai, JAHA, DOM, KHUD, INPUT, KI, VALUE, MANAGE, KARTA, hai — React, STATE, INVOLVED, NAHI, HOTI. useRef, SE, VALUE, ko, JAB, ZAROORAT, HO, (jaise, SUBMIT, TIME) READ, KIYA, JAATA, hai, HAR, KEYSTROKE, PAR, NAHI.
Uncontrolled components, SIMPLER, HAIN, aur, THODA, BETTER, PERFORMANCE, DE, SAKTE, HAIN (RE-RENDER, HAR, KEYSTROKE, PAR, NAHI, HOTA) — LEKIN, REAL-TIME, VALIDATION, JAISE, FEATURES, KE, LIYE, LESS, SUITABLE, HAIN.
function SimpleForm() {
const nameRef = React.useRef();
const emailRef = React.useRef();
function handleSubmit(e) {
e.preventDefault();
console.log(nameRef.current.value, emailRef.current.value);
// React, HAR keystroke PAR, involve NAHI hua — sirf, SUBMIT, PAR, READ
}
return (
<form onSubmit={handleSubmit}>
<input ref={nameRef} type="text" defaultValue="" />
<input ref={emailRef} type="email" />
<button type="submit">Submit</button>
</form>
);
}- Uncontrolled = DOM, khud, value, manage karta hai — React state, INVOLVED NAHI
- useRef = value, ko, jab, zaroorat ho, tab, READ karta hai (HAR, keystroke, par, NAHI)
- defaultValue (NOT value) = uncontrolled, inputs, mein, initial, value, set, karta hai
<input type="file">, HAMESHA, UNCONTROLLED, HOTA, hai — SECURITY, REASONS, SE, JavaScript, PROGRAMMATICALLY, FILE, INPUT, KI, VALUE, SET, NAHI, KAR, SAKTA. useRef, SE, SELECTED, FILE(S), (e.target.files) ACCESS, KI, JA, SAKTI, HAIN.
<input type="file" ref={fileRef} onChange={e => console.log(e.target.files[0])} />EK, INPUT, KO, KABHI, value={undefined} (CONTROLLED, NAHI, HOTA, kyunki, undefined, hai) aur, KABHI, value={someState} (CONTROLLED) DENA, React, WARNING, DETA, hai — "A COMPONENT IS CHANGING AN UNCONTROLLED INPUT TO BE CONTROLLED". INITIAL, STATE, KO, EMPTY, STRING (NOT undefined) SE, INITIALIZE, KARO.