Mi a különbség a kontrollált és kontrolláletlen inputok között?

Question

Accepted Answer

Végül is arról van szó, **hogy ki az igazság forrása az input értékéhez** — React state vagy maga a DOM. ## Kontrollált (React tulajdonolja az értéket) Az input `value` attribútuma az state által vezérelt, és az `onChange` szinkronban tartja a state-et. A DOM mindig tükrözi a React-et: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Mivel az state az igazság forrása, minden billentyűlenyomáskor validálhatsz, formázhatsz vagy transzformálhatsz (pl. nagybetűsítés kényszerítése, hossz korlátozása, elküldési gomb letiltása). ## Kontrolláletlen (a DOM tulajdonolja az értéket) A böngésző tartja az értéket; csak ref-en keresztül olvasod ki, amikor szükséges: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Mikor melyiket használd - **Kontrollált**: legtöbb form — validálást, feltételes UI-t és egyetlen igazság forrást kapsz. A hátránya, hogy billentyűnként egy újrarenderelés történik (általában elhanyagolható). - **Kontrolláletlen**: egyszerű formok, fájl inputok (`` mindig kontrolláletlen), vagy nem-React widgetek integrálása. Kevesebb kód, de nem tudsz reagálni a változásokra ahogy történnek. A kettő keverése (mind a `value`, mind a `defaultValue` átadása) egy gyakori hiba, és React figyelmeztetést vált ki.