Mis vahe on kontrollitud ja kontrollimata sisendil ning millal mida kasutada?

Kontrollitud sisend — see on vormielement, mille väärtus on täielikult komponendi oleku kontrolli all (näiteks Reactis). Välja väärtus salvestatakse olekusse ja uuendatakse sündmuse töötleja kaudu.

Kontrollimata sisend — see on vormielement, mida hallatakse ise DOM-i poolt, mitte komponendi oleku kaudu. Väärtus loetakse viidete kaudu, kui see on vajalik.

Millal kasutada:

• Kontrollitud sisend on mugav, kui on vaja reageerida kohe muutustele, valideerida andmeid, sünkroniseerida rakenduse olekuga.
• Kontrollimata sisend on lihtsam ja kiirem lihtsate vormide puhul, kus pidev kontroll ei ole vajalik.

Reacti näide kontrollitud sisendist:

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

Näide kontrollimata sisendist:

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