Jaký je rozdíl mezi řízenými a neřízenými vstupy?

Question

Accepted Answer

Jde o to, **kdo je zdrojem pravdy pro hodnotu vstupu** — React state nebo samotný DOM. ## Řízené vstupy (React vlastní hodnotu) Hodnota `value` vstupu je řízena stavem a `onChange` udržuje stav v synchronizaci. DOM vždy odráží React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Protože je stav zdrojem pravdy, můžete ověřit, naformátovat nebo transformovat při každém stisku klávesy (např. vynutit velká písmena, omezit délku, vypnout tlačítko odeslání). ## Neřízené vstupy (DOM vlastní hodnotu) Prohlížeč udržuje hodnotu; čtete ji pouze v případě potřeby prostřednictvím ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Kdy použít které - **Řízené**: většina formulářů — získáte ověření, podmíněné uživatelské rozhraní a jeden zdroj pravdy. Nevýhodou je re-render při každém stisku klávesy (obvykle zanedbatelné). - **Neřízené**: jednoduché formuláře, vstup souborů (`` je vždy nerizen), nebo integrace widgetů mimo React. Méně kódu, ale nemůžete reagovat na změny, když nastanou. Smíchání obojího (předání `value` i `defaultValue`) je běžná chyba a spustí upozornění React.