Jaka jest różnica między kontrolowanymi a niekontrolowanymi inputami?

Question

Accepted Answer

Sprowadza się to do **kto jest źródłem prawdy dla wartości inputu** — stan React czy sam DOM. ## Kontrolowane (React posiada wartość) Wartość inputu jest sterowana stanem, a `onChange` utrzymuje stan w synchronizacji. DOM zawsze odzwierciedla React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Ponieważ stan jest źródłem prawdy, możesz walidować, formatować lub transformować przy każdym naciśnięciu klawisza (np. wymuszić wielkie litery, ograniczyć długość, wyłączyć przycisk wysyłania). ## Niekontrolowane (DOM posiada wartość) Przeglądarka przechowuje wartość; odczytasz ją tylko w razie potrzeby poprzez ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Kiedy używać którego - **Kontrolowane**: większość formularzy — otrzymujesz walidację, warunkowy interfejs użytkownika i jedno źródło prawdy. Wadą jest renderowanie przy każdym naciśnięciu klawisza (zwykle znikome). - **Niekontrolowane**: proste formularze, inputy plikowe (`` jest zawsze niekontrolowany) lub integracja widżetów spoza React. Mniej kodu, ale nie możesz reagować na zmiany w momencie ich występowania. Mieszanie ich (przekazywanie zarówno `value` jak i `defaultValue`) to powszechny błąd i powoduje ostrzeżenie React.