Ποια είναι η διαφορά μεταξύ ελεγχόμενων και μη ελεγχόμενων εισόδων;

Question

Accepted Answer

Ανάγεται σε **ποιος είναι η πηγή αλήθειας για την τιμή της εισόδου** — React state ή το ίδιο το DOM. ## Ελεγχόμενες (React κατέχει την τιμή) Η τιμή `value` της εισόδου οδηγείται από το state και `onChange` διατηρεί το state συγχρονισμένο. Το DOM πάντα αντικατοπτρίζει το React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Επειδή το state είναι η πηγή αλήθειας, μπορείτε να επικυρώσετε, να μορφοποιήσετε ή να μετασχηματίσετε σε κάθε πληκτρολόγηση (π.χ. επιβολή κεφαλαίων, περιορισμός μήκους, απενεργοποίηση κουμπιού υποβολής). ## Μη ελεγχόμενες (το DOM κατέχει την τιμή) Το πρόγραμμα περιήγησης διατηρεί την τιμή· την διαβάζετε μόνο όπως χρειάζεται μέσω ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Πότε να χρησιμοποιήσετε ποιες - **Ελεγχόμενες**: τα περισσότερα έντυπα — λαμβάνετε επικύρωση, υπό όρους UI και μία πηγή αλήθειας. Το μειονέκτημα είναι ένα re-render ανά πληκτρολόγηση (συνήθως αμελητέο). - **Μη ελεγχόμενες**: απλά έντυπα, εισόδους αρχείων (`` είναι πάντα μη ελεγχόμενη), ή ενσωμάτωση widget εκτός React. Λιγότερος κώδικας, αλλά δεν μπορείτε να αποκριθείτε στις αλλαγές καθώς συμβαίνουν. Η ανάμειξή τους (μετάδοση και των `value` και `defaultValue`) είναι ένα κοινό σφάλμα και ενεργοποιεί μια προειδοποίηση React.