ਨਿਯੰਤਰਿਤ ਅਤੇ ਅਨਿਯੰਤਰਿਤ ਇਨਪੁਟ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?

Question

Accepted Answer

ਇਹ **ਇਨਪੁਟ ਦੀ ਵੈਲਿਊ ਦਾ ਸਰੋਤ ਕਾਰ ਕੌਣ ਹੈ** — React state ਜਾਂ DOM ਖੁਦ — ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ## Controlled (React ਵੈਲਿਊ ਦਾ ਮਾਲਕ ਹੈ) ਇਨਪੁਟ ਦੀ `value` state ਦੁਆਰਾ ਚਲਾਈ ਜਾਂਦੀ ਹੈ, ਅਤੇ `onChange` state ਨੂੰ ਸਿੰਕ ਵਿੱਚ ਰੱਖਦਾ ਹੈ। DOM ਹਮੇਸ਼ਾ React ਨੂੰ ਪ੍ਰਤਿਬਿੰਬਿਤ ਕਰਦਾ ਹੈ: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` ਕਿਉਂਕਿ state ਸਚ ਦਾ ਸਰੋਤ ਹੈ, ਤੁਸੀਂ ਹਰ keystroke 'ਤੇ validate, format, ਜਾਂ transform ਕਰ ਸਕਦੇ ਹੋ (ਜਿਵੇਂ uppercase ਲਾਗੂ ਕਰੋ, length ਸੀਮਿਤ ਕਰੋ, submit button ਨੂੰ ਅਯੋਗ ਬਣਾਓ)। ## Uncontrolled (DOM ਵੈਲਿਊ ਦਾ ਮਾਲਕ ਹੈ) ਬ੍ਰਾਉਜ਼ਰ ਵੈਲਿਊ ਰੱਖਦਾ ਹੈ; ਤੁਸੀਂ ਇਸਨੂੰ ਸਿਰਫ ਲੋੜ ਸਮੇਂ ref ਦੁਆਰਾ ਪੜ੍ਹਦੇ ਹੋ: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## ਕਿਹੜਾ ਕਦੋਂ ਵਰਤਣਾ ਹੈ - **Controlled**: ਬਹੁਤੇ forms — ਤੁਹਾਨੂੰ validation, conditional UI, ਅਤੇ ਇੱਕ ਸਿੰਗਲ ਸਰੋਤ ਮਿਲਦਾ ਹੈ। ਨੁਕਸਾਨ ਇਹ ਹੈ ਕਿ ਹਰ keystroke 'ਤੇ re-render ਹੁੰਦਾ ਹੈ (ਆਮ ਤੌਰ 'ਤੇ ਮਾਮੂਲੀ)। - **Uncontrolled**: ਸਧਾਰਨ forms, file inputs (`` ਹਮੇਸ਼ਾ uncontrolled ਹੁੰਦਾ ਹੈ), ਜਾਂ non-React widgets ਨੂੰ ਇਕੱਠਾ ਕਰਨਾ। ਘੱਟ ਕੋਡ, ਪਰ ਤੁਸੀਂ ਤਬਦੀਲੀਆਂ ਦੇ ਨਾਲ-ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਉਹਨਾਂ ਨੂੰ ਮਿਲਾਉਣਾ (ਦੋਵਾਂ `value` ਅਤੇ `defaultValue` ਪਾਸ ਕਰਨਾ) ਇੱਕ ਆਮ ਗ਼ਲਤੀ ਹੈ ਅਤੇ ਇੱਕ React warning ਨੂੰ ਟਰਿਗਰ ਕਰਦਾ ਹੈ।