Menene bambanci tsakanin controlled da uncontrolled inputs?

Question

IT Interview Practice · Accepted Answer

Yana zuwa ga **wane ya kasua gida ga ƙimar input — React state, ko DOM kanta. ## Controlled (React ya kasu gida ga ƙimar) `value` na input yana jirgon state, kuma `onChange` yana kiyaye state a cikin daidai. DOM koyaushe yana nuna React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Domin state ita ce tushen gida, kana iya tabbatar, tsara, ko canza a kowacce bugi (misali tilasta babbar haruf, takaita tsawon, kashe buton ajiye). ## Uncontrolled (DOM ya kasua gida ga ƙimar) Browser yana ajiye ƙimar; ka karanta shi ne kawai lokacin da aka buƙata ta hanyar ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Lokacin da za ka yi amfani da wane - **Controlled**: yawancin fom — ka sami tabbatarwa, UI na ƙulayi, da tushen gida guda. Ƙaramin abu shi ne sake gabatarwa a kowacce bugi (galibi ba abu ba). - **Uncontrolled**: fom masu sauƙi, file inputs (`` koyaushe uncontrolled), ko haɗa waje non-React widgets. Ƙaramin alamomi, amma ba za ka iya amsa ga sauye-sauye ba a matsayin suna faruwa. Hada su (watsi da duka `value` da `defaultValue`) wadata kuskure ne da ya banda React gargajiya.

Controlled (React ya kasu gida ga ƙimar)

Uncontrolled (DOM ya kasua gida ga ƙimar)

Lokacin da za ka yi amfani da wane

Tambayoyi masu alaƙa