Kontrollü ve kontrolsüz girdiler arasındaki fark nedir?

Question

Accepted Answer

Girdinin değeri için **gerçeğin kaynağı kim** — React state ya da DOM'un kendisi. ## Neden önemli ### Kontrollü (React değeri sahiplenmiştir) Girdinin `value` özelliği state tarafından kontrol edilir ve `onChange` state'i senkronize tutar. DOM her zaman React'ı yansıtır: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` State gerçeğin kaynağı olduğu için, her tuşa basışta doğrulama yapabilir, biçimlendirebilir veya dönüştürebilirsiniz (örn. büyük harfe zorla, uzunluğu sınırla, gönder düğmesini devre dışı bırak). ### Kontrolsüz (DOM değeri sahiplenmiştir) Tarayıcı değeri tutar; bunu sadece gerektiğinde ref üzerinden okursunuz: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Hangisini ne zaman kullanacağınız - **Kontrollü**: çoğu form — doğrulama, koşullu UI ve tek gerçek kaynağı elde edersiniz. Dezavantajı her tuşa basışta yeniden render olmasıdır (genellikle ihmal edilebilir). - **Kontrolsüz**: basit formlar, dosya girdileri (`` her zaman kontrolsüzdür) veya React olmayan widget'ları entegre etmek. Daha az kod, ama değişikliklere gerçekleştikleri sırada tepki veremezsiniz. Karıştırmak (hem `value` hem de `defaultValue` göndermek) yaygın bir hatadır ve React uyarısını tetikler.