6.7 טפסים בריאקט תרגול
תרגול - טפסים בריאקט¶
תרגיל 1 - טופס התחברות¶
צרו קומפוננטה LoginForm עם:
- שדה אימייל (type="email")
- שדה סיסמה (type="password")
- checkbox "זכור אותי"
- כפתור שליחה
- ולידציה בשליחה: אימייל חייב להכיל @, סיסמה חייבת להיות לפחות 6 תווים
- הצגת שגיאות מתחת לכל שדה עם בעיה
- כפתור השליחה מנוטרל כשהשדות ריקים
השתמשו ב-controlled components עם אובייקט סטייט אחד לכל השדות.
תרגיל 2 - טופס רישום מורחב¶
צרו קומפוננטה RegistrationForm עם handler אחד לכל השדות:
- שם מלא (text)
- אימייל (email)
- סיסמה (password)
- אישור סיסמה (password) - חייב להיות זהה לסיסמה
- גיל (number)
- מגדר (radio buttons - male/female/other)
- תחום עניין (select - technology/sports/music/art)
- הסכמה לתנאי שימוש (checkbox) - חובה לסמן כדי לשלוח
הציגו תצוגה מקדימה (preview) של כל הנתונים מתחת לטופס. בשליחה, וולדו את כל השדות והציגו שגיאות.
תרגיל 3 - טופס דינמי - רשימת מיומנויות¶
צרו קומפוננטה SkillsForm שמאפשרת להוסיף ולמחוק מיומנויות:
- שדה טקסט להוספת מיומנות חדשה
- select לבחירת רמה (beginner/intermediate/advanced)
- כפתור "הוסף" שמוסיף את המיומנות לרשימה
- כל מיומנות ברשימה מוצגת עם שמה, רמתה, וכפתור מחיקה
- אי אפשר להוסיף מיומנות ריקה או כפולה
- מספר המיומנויות הכולל מוצג
תרגיל 4 - טופס עריכת פרופיל¶
צרו קומפוננטה ProfileEditor עם:
- טופס עם שדות: שם, אימייל, ביוגרפיה (textarea), עיר (select עם רשימת ערים)
- הטופס נטען עם נתונים קיימים (נתוני פרופיל ראשוניים)
- כפתור "שמור" שומר את השינויים
- כפתור "בטל" שמחזיר את הטופס לנתונים המקוריים
- כפתור "שמור" מנוטרל כשלא היו שינויים (השוו לנתונים המקוריים)
- הצגת הודעה "השינויים נשמרו" אחרי שמירה מוצלחת
תרגיל 5 - יוצר סקר¶
צרו קומפוננטה SurveyBuilder שמאפשרת ליצור סקר:
- שדה לכותרת הסקר
- כפתור "הוסף שאלה" שמוסיף שאלה חדשה
- כל שאלה כוללת: שדה לטקסט השאלה, select לסוג השאלה (text/multiple-choice/yes-no)
- כששאלה מסוג multiple-choice, מוצגות אופציות עם אפשרות להוסיף ולמחוק אופציות
- כפתור מחיקה לכל שאלה
- כפתור "הצג תצוגה מקדימה" שמציג את הסקר כפי שהמשתמש יראה אותו
שאלות¶
- מה ההבדל בין controlled ל-uncontrolled components? מתי נעדיף כל גישה?
- למה צריך
e.preventDefault()ב-onSubmit של טופס? - איך עובד הטריק של handler אחד לכל השדות? מה התפקיד של
nameו-[name]: value? - למה ב-checkbox קוראים מ-
e.target.checkedולא מ-e.target.value?