რა განსხვავებაა კონტროლირებული და არაკონტროლირებული ინპუტებს შორის?

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 წარმოადგენს ჭეშმარიტების წყაროს, შეგიძლიათ ვალიდირება, ფორმატირება ან ტრანსფორმაცია შეასრულოთ ყოველი ღილაკის დაჭერის დროს (მაგალითად: ინიშიალიზაცია დიდი ასოებით, სიგრძის შეზღუდვა, submit ღილაკის გასააქტიურება). ## არაკონტროლირებული (DOM ფლობს მნიშვნელობას) ბრაუზერი ინახავს მნიშვნელობას; თქვენ კითხულობთ მას მხოლოდ საჭიროების შემთხვევაში ref-ის მাშინებლობით: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## როდის გამოიყენოთ რომელი - **კონტროლირებული**: უმეტეს ფორმებში — თქვენ ღებულობთ ვალიდირებას, პირობით UI-ს და ერთ წყაროს წარმოადგენს ჭეშმარიტება. მეორე მხარე არის re-render ყოველი ღილაკის დაჭერის დროს (ჩვეულებრივ უმნიშვნელოა). - **არაკონტროლირებული**: მარტივი ფორმები, ფაილის ინპუტები (`` ყოველთვის არაკონტროლირებულია), ან არა-React ვიჯეტების ინტეგრაცია. ნაკლები კოდი, მაგრამ თქვენ ვერ იტყვით ცვლილებებს, როდესაც ისინი ხდება. მათი შერევა (ორივე `value` და `defaultValue`-ის ატრიბუტი გამოყენება) ჩვეულებრივი შეცდომაა და იწვევს React გაფრთხოებას.