নিয়ন্ত্রিত এবং অনিয়ন্ত্রিত ইনপুটের মধ্যে পার্থক্য কী?

Question

Accepted Answer

এটি সবকিছু নিয়ে আসে **ইনপুটের মূল্যের জন্য সত্যের উৎস কে** — React state নাকি DOM নিজেই। ## নিয়ন্ত্রিত (React মূল্য নিয়ন্ত্রণ করে) ইনপুটের `value` state দ্বারা চালিত হয়, এবং `onChange` state সিঙ্ক রাখে। DOM সবসময় React প্রতিফলিত করে: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` কারণ state সত্যের উৎস, আপনি প্রতিটি keystroke এ যাচাই, ফরম্যাট বা রূপান্তর করতে পারেন (যেমন uppercase বাধ্য করা, দৈর্ঘ্য সীমাবদ্ধ করা, submit বাটন অক্ষম করা)। ## অনিয়ন্ত্রিত (DOM মূল্য নিয়ন্ত্রণ করে) ব্রাউজার মূল্য রাখে; আপনি ref এর মাধ্যমে প্রয়োজনীয় সময়েই এটি পড়েন: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## কোনটি কখন ব্যবহার করবেন - **নিয়ন্ত্রিত**: বেশিরভাগ ফর্ম — আপনি যাচাই, শর্তসাপেক্ষ UI এবং একক সত্যের উৎস পান। অপূর্ণতা হল প্রতিটি keystroke এ একটি re-render (সাধারণত উপেক্ষণীয়)। - **অনিয়ন্ত্রিত**: সহজ ফর্ম, ফাইল ইনপুট (`` সবসময় অনিয়ন্ত্রিত), বা non-React উইজেট সংহত করা। কম কোড, কিন্তু আপনি পরিবর্তনগুলিতে সাড়া দিতে পারবেন না যখন তারা ঘটে। দুটি মিশ্রিত করা (`value` এবং `defaultValue` উভয় পাস করা) একটি সাধারণ ত্রুটি এবং একটি React সতর্কতা ট্রিগার করে।