כפתור SUBMIT בטפסים של ריאקט - React Forms
register, אבל לחיצה על הכפתור עדיין לא מייצרת אובייקט ProductModel. כאן מחברים את אירוע ה-submit לפונקציה שמקבלת את האובייקט המוכן.submit ומחברים אותה ל-onSubmit של הטופס. היא נקראת בלחיצה על הכפתור, אבל הדף גם מתרענן, וזה לא רצוי באפליקציית Single Page.onSubmit הוא אירוע רגיל של React ומעביר Synthetic Event. React לא הופכת את נתוני הטופס לאובייקט ProductModel. אילו עשתה זאת, לא היינו צריכים ספרייה חיצונית.handleSubmit היא פונקציה של react-hook-form. קוראים לה ומעבירים לה את הפונקציה שלנו, והיא מחזירה פונקציה חדשה שמתאימה ל-onSubmit.register כדי לדעת איזה ערך שייך לאיזה מאפיין, ומעבירה לפונקציה שלנו אובייקט ProductModel.alert ב-console.log של המוצר. בקונסול רואים אובייקט עם name, price, stock ו-FileList שמכיל את התמונה שנבחרה.onSubmit={handleSubmit(submit)} - קריאה לפונקציה, לא רק הפניה אליה.submit מקבלת פרמטר מסוג ProductModel.פרקי ההרצאה: כפתור SUBMIT בטפסים של ריאקט - React Forms
תמלול ההרצאה: כפתור SUBMIT בטפסים של ריאקט - React Forms
הטקסט המלא של הדקות הראשונות בהרצאה «כפתור SUBMIT בטפסים של ריאקט - React Forms» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
עכשיו מה שאנחנו רוצים לעשות זה להצליח איכשהו לקחת את כל המידע הזה ולהפוך אותו לאובייקט מסוג רודקט מודל בכדי לשלוח את האובייקט הזה לשרת.
אוקיי, איך אנחנו עושים את זה? דבר ראשון, מה בעצם מתרחש כאשר אנחנו לוחצים על הלחצן? מה שמתרחש זה אירוע שנקרא onSubmit. אנחנו רוצים לקרוא לפונקציה.
בואו נבנה פה איזושהי פונקציה ונקרא לה Submit. אם אנחנו באים לפה ואומרים תשמע הנה פונקציה submit תקרא לה ברגע שנלחץ על הלחצן בשביל לבצע submit זאת הפונקציה שתתבצע.
בואו נשים פה איזשהו alert submit form ניגש רגע לטופס שלנו נמלא את הפרטים אולי נבחר באיזושהי תמונה יש לנו פה כל מיני עיקרות ונבצע add והנה אנחנו רואים submit form והטופס כמובן שולח את עצמו לשרת מבצע רפרש זה ליתר דיוק זה משהו שאנחנו לא רוצים שיתבצע כי אנחנו סינגל פייג' אפליקיישן
אנחנו לא רוצים לבצע רפרש אבל מה שאנחנו רואים זה שהצלחנו לקרוא לפונקציה זה בסדר אבל מה שלא בסדר פה זה איפה האובייקט שלנו איך אני משיג את אותו אובייקט מסוג פרודקט מודל כי אני רוצה שהספרייה הזאת תביא לי אובייקט מוכן שאלה הערכים שיש בו אוטומטית מה שהיה פה נכנס לניים ואוטומטית מה שהיה פה נכנס לפרייס
וכדומה האם אנחנו יכולים שהפונקציה הזאת תקבל כרגע את האובייקט שלנו פרודקט מסוג product model אז כמובן שזה לא עובד בפני ש-onsubmit זה אירוע של react זה לא אירוע של הספרייה use form וreact לא יודעת לבצע את הטיפול הזה היא לא לוקחת את כל המידע הזה ואוטומטית הופכת אותו לאובייקט מסוג פרודקט
מודל ומביאה לנו. אם היא הייתה עושה את זה לא היינו צריכים את הספרייה החיצונית הזאת. ברור שאם ריאקט מטפלת לי במשהו אני לא צריך ללכת ולהתקין ספריות חיצוניות שעושות לי את זה.
בגלל שריאקט לא יודעת לקחת מידע מטופס ולהפוך אותו לאובייקט מוכן היינו צריכים ספרייה שעושה את זה.
מן הסתם אנחנו רואים שיש לנו פה איזושהי בעיה כי ריאקט אומרת לי תשמע, onSubmit זה אירוע שהוא אירוע רגיל של HTML. אם אתה רוצה תן פה את הארגס הרגילים שהם מסוג Synthetic Event כמו שאנחנו כבר מכירים.
זה אני יודעת לעבוד איתו, אני לא יודעת לעבוד עם כל מיני אירובייקטים מוזרים שלך. אז בשביל זה אנחנו צריכים את HandleSubmit. HandleSubmit זאת עוד פונקציה של הספרייה הזאת שהיא יודעת לקחת את המידע להפוך להיותו לאובייקט פרודקט מודל ולהביא לי.
זאת אומרת, מה שאנחנו צריכים, אנחנו לא צריכים את ה-args הזה, אני אתן ממנו. אנחנו כן רוצים שהפונקציה תקבל פרודקט מסוג פרודקט מודל.
onSubmit,