חיבור של רכיב לטופס עם React Hook
ProductModel. ההרצאה מראה איך מחברים כל תיבה במסך למאפיין במודל בעזרת הספרייה react-hook-form.ProductModel יש id, name, price, stock ו-imageName. המשתמש לא מזין id, כי מסד הנתונים מייצר אותו. כן רוצים לקלוט name, price, stock ותמונה כקובץ.npm i react-hook-form. היא הפופולרית והקלה לעבודה, אבל היא hook ולכן עובדת רק ב-functional components.useForm כפונקציה גנרית עם ProductModel, כך שהמידע מהטופס יהפוך לאובייקט מהסוג הזה.register ו-handleSubmit.{...register("name")}, ולתיבות האחרות price ו-stock. ה-spread operator פורס את האובייקט ש-register מחזיר (onChange, onBlur, ref ועוד), כמו ה-binding שהיינו כותבים ידנית.imageName, כי זה מחרוזת עם שם הקובץ בשרת (למשל 1.JPG). מוסיפים למודל מאפיין image מסוג FileList ומחברים אליו את התיבה.imageName נשאר לתמונה שכבר קיימת בשרת.ProductModel עם handleSubmit. כאן אפשר כבר לחבר תיבות לטופס בלי לכתוב state ואירועים לכל תיבה.פרקי ההרצאה: חיבור של רכיב לטופס עם React Hook
תמלול ההרצאה: חיבור של רכיב לטופס עם React Hook
הטקסט המלא של הדקות הראשונות בהרצאה «חיבור של רכיב לטופס עם React Hook» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
מה שאנחנו רוצים לעשות זה להצליח לקלוט את המידע מהתיבות האלה לאובייקט מסוג המודל שלנו. המודל שלנו היה, אם אני מסתכל במודלים, פרודקט מודל.
פרודקט מודל, אנחנו רואים שיש לו ID, Name, Price, Stock ו-Image Name, שזאת התמונה שהשרת מביא לי, ולא התמונה שהיוזר מכניס כי זה סטרינג. כמובן שהיוזר, כשהוא מוסיף מוצר חדש, הוא לא צריך להתעסק עם איי-די, זה משהו שהוא לא מכניס לנו, וכשאנחנו שולחים את המוצר לשרת, ל-Backend, אז ה-Backend שומר אותו בדאטאבייס, והדאטאבייס כבר מייצר לו איי-די.
אנחנו רוצים שהיוזר יכניס רק Name, Price, Stock ו-Image, לא Image Name, אלא Image כקובץ, זה היה רק איזה תמונה קיימת בשרת שאנחנו רוצים להציג.
אז אנחנו בטח נשנה את זה או נוסיף פה עוד משהו. אנחנו רוצים שהטופס יביא לנו אובייקט כזה, אבל הטופס זה טופס html, הוא לא מתעסק עם אובייקט פרודקט מודל, זה ברור.
הטופס אומר, תשמע, יש לי תיבת טקסט, זה כנראה בשביל השם של המוצר, יש לי פה עוד תיבת טקסט, בשביל המחיר, יש לי עוד תיבה בשביל הסטוק, ויש לי עוד תיבה בשביל הקובץ של התמונה.
אוקיי, אז בוא תכניס את המידע, מה הקשר בין זה לבין זה? אם היינו עובדים עם two-way binding native ב-react אז היינו צריכים לקחת בעצמנו כל פריט שהמשתמש מכניס בעזרת two-way binding כמו שלמדנו בעבר ואז להפוך את זה לאובייקט מסוג product model או לייצר אובייקט product model ולהכניס לתוכו את כל המידע ואז נוכל לשלוח לשרת אובייקט product model.
אבל זה המון קוד וזה כמובן מיותר מפני שכמו שאמרנו יש לנו ריאקט הוק שעושה בדיוק את זה, הריאקט הוק שקיימת מתחברת לטורפס וקולטת ממנו את המידע ומביאה לנו את המידע מוכן כאובייקט שאנחנו אומרים לה. דבר ראשון אנחנו צריכים להתקין את זה, אז בואו נפתח את הטרמינל ובואו קודם כל ננקה אותו ונתקין
NPMI וזה נקרא React/Hook/Form/Go זאת בעצם הספרייה הכי פופולרית היום והכי טובה היום להתעסק עם טפסים. יש המון ספריות כאלה, יש מעל 10 ספריות שמסוגלות לקחת מידע מטפסים אבל זאת הכי מומלצת והכי קלה לעבודה מפני שהיא מאפשרת לנו בהכי מעט קוד לקחת את המידע מהטופס.
החיסרון או היתרון שלה, תלוי איך אתם מסתכלים על זה, זה שהיא הוק, ReactHook, ולכן ניתן לעבוד איתה רק ב-Functional Component.
אם היינו רוצים לעבוד עם Class Component הספרייה הזאת לא הייתה טובה לנו. בואו רגע נוריד את זה. אחרי שהתקנו אותה פשוט נשתמש בה. UseForm, הנה היא כאן, זאת הפונקציה שלנו, זה ה-ReactHook, אנחנו רואים שהיא מגיעה מהספרייה הזאת, וזאת פונקציה ג'נרית שאומרת לנו לאיזה מודל או אובייקט אתם רוצים שאני אהפוך את כל המידע מהטופס.
אנחנו רוצים להפוך אותו לפרודקט מודל, זה המודל שבנינו, זה עד כדי כך פשוט. אז אנחנו קוראים לפונקציה, אנחנו אומרים לה תשמעי את עובדת עם פרודקט מודל, זאת אומרת המידע שאת לוקחת מהטופס את הופכת אותו לפרודקט מודל.
רגע, איך הספרייה הזאת יודעת שזה הולך להיכנס לניים של הפרודקט מודל וזה הולך להיכנס לפרייס וכדומה, תכף נגיד לה.
אבל קודם כל אנחנו משתמשים עם ה-react hook, והיא מחזירה לנו אובייקט שמכיל מספר מאפיינים שאנחנו צריכים. אז אנחנו כבר ראינו בעבר את הנושא של דיסטרקטורינג, אנחנו פשוט יכולים לשלוף את המאפיינים מפה ישירות לאובייקט או למשתנים בתוך אובייקט.
ואנחנו רוצים כרגע לקחת שניים, רג'יסטר והנדל סדמיט. אלו שני מאפיינים שנמצאים בתוך האובייקט שמוחזר. לא היינו חייבים להשתמש בתחביר הזה, אבל זה תחביר פשוט יותר קל.
יכלנו לקחת איזשהו אובייקט אחד ויחיד, ואז באובייקט הזה היה את הרג'יסטר ואת הנדל סדמיט שאנחנו צריכים אותם ותכף נבין מה הם. אבל כמובן יותר מקצועי פשוט לעשות את זה בפקודה אחת.
אנחנו רוצים רג'יסטר והנדל סדמיט. אלו שתי פונקציות שאנחנו עובדים איתן. אז קודם כל מה שעשינו זה קראנו ל-UseForm, אמרנו לה שהיא עובדת ולוקחת את המידע על ידי פרודקט מודל או הופכת את המידע לפרודקט מודל ואנחנו רוצים את שתי הפונקציות האלה, רג'יסטר והנדל סדמיט.
מה אנחנו עושים איתם? רג'יסטר זה הקונקשן של כל איבה למאפיין בתוך המודל שלנו. בואו רגע נשים את המודל פה בצד שנראה אותו מול העיניים.
והמודל שלנו שאנחנו רוצים שהטופס ייצר זה פרודקט מודל. ואנחנו רוצים לדוגמה את המידע מהתיבה הזאת להכניס לתוך המאפיין name בתוך הפרודקט מודל.
ואת התיבה הזאת, את המידע שהיא מביאה, להכניס למאפיין price שנמצא בתוך פרודקט מודל. איך אנחנו אומרים את זה למערכת? אז אנחנו פשוט משתמשים בפונקציה הראשונה שהבאנו שנקראת רג'יסטל ואנחנו עושים את זה על ידי תחביר שנראה קצת מוזר והוא שלוש נקודות רג'יסטל.
אורייט ואנחנו כמובן קוראים לפונקציה ותכף נראה מה אנחנו שולחים אליה. מה זה בעצם התחביר של השלוש נקודות? התחביר של השלוש נקודות זה תחביר שנקרא spread