Kāda ir atšķirība starp kontrolētu un nekontrolētu ievadi un kad ko izmantot?

Kontrolēta ievade — tas ir formas elements, kura vērtība ir pilnībā kontrolēta ar komponenta stāvokli (piemēram, React). Lauka vērtība tiek glabāta stāvoklī un tiek atjaunināta ar notikumu apstrādātāju.

Nekontrolēta ievade — tas ir formas elements, kuru pārvalda pats DOM, nevis komponenta stāvoklis. Vērtība tiek lasīta caur atsaucēm, kad tas ir nepieciešams.

Kad izmantot:

• Kontrolēta ievade ir ērta, ja nepieciešams nekavējoties reaģēt uz izmaiņām, validēt datus, sinhronizēt ar lietojumprogrammas stāvokli.
• Nekontrolēta ievade ir vienkāršāka un ātrāka vienkāršiem formu gadījumiem, kur nav nepieciešama pastāvīga uzraudzība.

React piemērs kontrolētai ievadei:

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

Nekontrolētas ievades piemērs:

function MyInput() {
  const inputRef = React.useRef(null);
  const handleSubmit = () => {
    alert(inputRef.current.value);
  };
  return <>
    <input ref={inputRef} />
    <button onClick={handleSubmit}>Sūtīt</button>
  </>;
}