Mi a különbség a kontrollált és kontrollálatlan bemenet között, és mikor melyiket használjuk?

Irányított bemenet — ez egy űrlapelem, amelynek értéke teljes mértékben a komponens állapota által van irányítva (például React-ben). A mező értékét az állapotban tárolják, és eseménykezelőn keresztül frissítik.

Irányítatlan bemenet — ez egy olyan űrlapelem, amelyet a DOM kezel, nem pedig a komponens állapota. Az értéket szükség szerint referencia segítségével olvassák.

Mikor használjuk:

• Az irányított bemenet akkor hasznos, ha azonnal reagálni kell a változásokra, adatokat kell validálni, vagy szinkronizálni kell az alkalmazás állapotával.
• Az irányítatlan bemenet egyszerűbb és gyorsabb egyszerű űrlapokhoz, ahol nincs szükség folyamatos ellenőrzésre.

React példája irányított bemenetre:

function MyInput() {
  const [value, setValue] = React.useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Példa irányítatlan bemenetre:

function MyInput() {
  const inputRef = React.useRef(null);
  const handleSubmit = () => {
    alert(inputRef.current.value);
  };
  return <>
    <input ref={inputRef} />
    <button onClick={handleSubmit}>Küldés</button>
  </>;
}