Cila është ndryshimi midis inputeve të kontrolluara dhe të pakontrolluara?

Question

Accepted Answer

Gjithçka varet nga **kush është burimi i të vërtetës për vlerën e inputit** — React state, ose vetë DOM. ## Të kontrolluara (React zotëron vlerën) Vlera `value` e inputit drejtohet nga state, dhe `onChange` mban state në sinkron. DOM-i gjithmonë pasqyron React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Në qoftë se state është burimi i të vërtetës, mund të validosh, formatosh, ose transformosh në çdo goditje tastiere (p.sh. detyro shkronja të mëdha, kufizo gjatësinë, çaktivizo butonin e dorëzimit). ## Të pakontrolluara (DOM-i zotëron vlerën) Shfletuesi mban vlerën; ti e lexon atë vetëm kur duhet përmes një ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Kur të përdorësh cilën - **Të kontrolluara**: shumica e formave — merr validim, UI-në kushtëzuar, dhe një burim të vetëm të të vërtetës. Disavantazhi është një ri-renderim për çdo goditje tastiere (zakonisht i papërfillshëm). - **Të pakontrolluara**: forma të thjeshta, input-e skedare (`` është gjithmonë i pakontrolluar), ose integrimi i widget-eve jo-React. Më pak kod, por nuk mund të reagosh ndaj ndryshimeve ndërsa ndodhin. Përzierja e tyre (kalimi i si `value` ashtu edhe `defaultValue`) është një gabim i zakonshëm dhe shkakton një paralajmërim React.