Kuo skiriasi kontroliuojamas ir nekontroliuojamas įvestis ir kada ką naudoti?

Valdomas įvestis — tai formos elementas, kurio reikšmė visiškai kontroliuojama komponento būsenos (pavyzdžiui, React). Lauko reikšmė saugoma būsenos ir atnaujinama įvykio tvarkyklės.

Nesubalansuota įvestis — tai formos elementas, kuris valdomas pačio DOM, o ne komponento būsenos. Reikšmė skaitoma per nuorodas, kai to reikia.

Kada naudoti:

• Valdoma įvestis patogu, kai reikia nedelsiant reaguoti į pokyčius, patikrinti duomenis, sinchronizuoti su programos būseną.
• Nesubalansuota įvestis yra paprastesnė ir greitesnė paprastiems formoms, kur nereikia nuolatinės kontrolės.

React pavyzdys valdoma įvestimi:

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

Nesubalansuotos įvesties pavyzdys:

function MyInput() {
  const inputRef = React.useRef(null);
  const handleSubmit = () => {
    alert(inputRef.current.value);
  };
  return <>
    <input ref={inputRef} />
    <button onClick={handleSubmit}>Siųsti</button>
  </>;
}