Ποια είναι η διαφορά μεταξύ ελεγχόμενης και ανεξέλεγκτης εισόδου και πότε να χρησιμοποιείτε το καθένα;

Ελεγχόμενη εισαγωγή — είναι ένα στοιχείο φόρμας του οποίου η τιμή ελέγχεται πλήρως από την κατάσταση του συστατικού (για παράδειγμα, στο React). Η τιμή του πεδίου αποθηκεύεται στην κατάσταση και ενημερώνεται μέσω χειριστή συμβάντων.

Ανεξέλεγκτη εισαγωγή — είναι ένα στοιχείο φόρμας που διαχειρίζεται από το DOM ίδιο, και όχι από την κατάσταση του συστατικού. Η τιμή διαβάζεται μέσω αναφορών όταν χρειάζεται.

Πότε να χρησιμοποιείτε:

• Η ελεγχόμενη εισαγωγή είναι βολική όταν πρέπει να αντιδρά άμεσα στις αλλαγές, να επικυρώνει δεδομένα, να συγχρονίζει με την κατάσταση της εφαρμογής.
• Η ανεξέλεγκτη εισαγωγή είναι πιο απλή και γρηγορότερη για απλά φορμά όπου δεν απαιτείται συνεχής έλεγχος της εισαγωγής.

Παράδειγμα ελεγχόμενης εισαγωγής σε React:

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

Παράδειγμα ανεξέλεγκτης εισαγωγής:

function MyInput() {
  const inputRef = React.useRef(null);
  const handleSubmit = () => {
    alert(inputRef.current.value);
  };
  return <>
    <input ref={inputRef} />
    <button onClick={handleSubmit}>Υποβολή</button>
  </>;
}