Wat is het verschil tussen gecontroleerde en uncontrolled input en wanneer gebruik je welke?

Geregeld invoer — dit is een formulieronderdeel waarvan de waarde volledig wordt gecontroleerd door de toestand van het component (bijvoorbeeld in React). De waarde van het veld wordt opgeslagen in de toestand en bijgewerkt via een gebeurtenishandler.

Ongeregelde invoer — dit is een formulieronderdeel dat door de DOM zelf wordt beheerd, niet door de toestand van het component. De waarde wordt gelezen via referenties wanneer dat nodig is.

Wanneer gebruiken:

• Geregelde invoer is handig wanneer je onmiddellijk op veranderingen wilt reageren, gegevens wilt valideren, synchroniseren met de toestand van de applicatie.
• Ongeregelde invoer is eenvoudiger en sneller voor eenvoudige formulieren waar constante controle niet nodig is.

Voorbeeld van geregelde invoer in React:

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

Voorbeeld van ongeregelde invoer:

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