नियन्त्रित र अनियन्त्रित इनपुटमा के फरक छ?

Question

Accepted Answer

यो **इनपुटको मूल्यको लागि सत्यको स्रोत कोन हो** यो बारेमा छ — React state, वा DOM आफै। ## नियन्त्रित (React मूल्य मालिक छ) इनपुटको `value` state द्वारा संचालित हुन्छ, र `onChange` ले state लाई sync मा राख्छ। DOM सधैं React लाई प्रतिबिम्बित गर्छ: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` किनकि state सत्यको स्रोत हो, तपाइँ प्रत्येक keystroke मा validate, format, वा transform गर्न सक्नुहुन्छ (जस्तै uppercase लाई बाध्य गर्नु, लम्बाई सीमित गर्नु, submit बटन अक्षम गर्नु)। ## अनियन्त्रित (DOM मूल्य मालिक छ) ब्राउजरले मूल्य राख्छ; तपाइँ यो केवल जरुरी भएमा ref को माध्यमबाट पढ्नुहुन्छ: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## कुन कहिले प्रयोग गर्ने - **नियन्त्रित**: अधिकांश फर्मे — तपाइँले validation, conditional UI, र एक सत्यको स्रोत पाउनुहुन्छ। असुविधा प्रत्येक keystroke प्रति पुनः-render हो (सामान्यतः नगण्य)। - **अनियन्त्रित**: साधारण फर्मे, फाइल इनपुटे (`` सधैं अनियन्त्रित छ), वा गैर-React विजेटे एकीकरण गर्दा। कम कोड, तर तपाइँ परिवर्तनहरुमा तिनीहरु हुँदा प्रतिक्रिया दिन सक्नुहुन्न। तिनीहरुलाई मिश्रित गर्नु (दुवै `value` र `defaultValue` पास गर्नु) एक साधारण गल्ती हो र React चेतावनी ट्रिगर गर्छ।