שדות קלט מבוקרים

שדות טקסט מעלים שאלה: המשתמש מקליד בתיבה, אבל לרכיב שלך יש מצב: מי הבעלים של הטקסט? ב-React התשובה היא: המצב הוא הבעלים שלו. זה נקרא שדה קלט מבוקר:

const [name, setName] = useState('');

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

שני חוטים יוצרים את הלולאה:

• value={name}: התיבה תמיד מציגה את המצב
• onChange: כל הקשה על מקש קוראת ל-setter עם e.target.value, הטקסט הנוכחי בתיבה

לכן, הקלדה מעדכנת את המצב, המצב גורם לרינדור מחדש, והתיבה מציגה את המצב החדש. היתרון: הטקסט נשמר במשתנה שאפשר לאמת, לשנות, לנקות או להציג בכל מקום אחר בדף.