אירועים - העברת מידע בין קומפוננט ילד לאבא שלו - Child to Parent Event
Thumbnail הוא קומפוננט שמציג תמונה מוקטנת עם כותרת, ומשמש כמה פעמים בדף. משתמש לוחץ על תמונה, ורק הבן יודע על כך. האב רוצה להגיב.Home, אלא בתיקיית Shared. יוצרים אותו עם props.imageSource ו-imageTitle. הקומפוננט מציג img עם 50x50, ומעוצב עם מסגרת, מרווחים ו-inline-block כדי שהתמונות יופיעו זו ליד זו. התמונות נמצאות ב-assets/images, ומיובאות בדף הבית.onClick לתמונה, עם פונקציה פנימית imageClickHandler. בשלב ראשון היא מציגה alert לבדיקה.imageClicked, מסוג פונקציה, בלי פרמטרים ועם ערך מוחזר void. הבן קורא לפונקציה הזו מתוך ה-handler שלו. האב בונה פונקציה thumbnailClickHandler ושולח אותה בתכונה. כך הבן קורא לפונקציה שמוגדרת באב, כי האב מכיר את הבן אבל הבן לא מכיר את האב.imageTitle מסוג string. האב מציג אותו, והבן שולח אותו בקריאה. האב חייב לספק פונקציה בחתימה התואמת.imageClicked עם סימן שאלה. אז צריך לבדוק ש-imageClicked קיים לפני הקריאה. התמונה השלישית בדוגמה לא נרשמת, ולא קורה בה כלום.if אפשר לכתוב props.imageClicked?.(props.imageTitle). הקריאה מתבצעת רק אם יש ערך ולא null או undefined.פרקי ההרצאה: אירועים - העברת מידע בין קומפוננט ילד לאבא שלו - Child to Parent Event
תמלול ההרצאה: אירועים - העברת מידע בין קומפוננט ילד לאבא שלו - Child to Parent Event
הטקסט המלא של הדקות הראשונות בהרצאה «אירועים - העברת מידע בין קומפוננט ילד לאבא שלו - Child to Parent Event» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
בסרטונים הקודמים ראינו איך parent component יכול להעביר ל-child component data. זה היה על ידי props, בין אם זה היה ב-functional component או ב-class component.
ראינו בנוסף גם את כל הקונספט של איבנטים, איך אנחנו יכולים להפעיל פונקציה על ידי איזשהו איבנט של html שמפעיל את הפונקציה. אנחנו בסרטון הזה רוצים לראות איך Child Component יכול להעביר דאטה ל-Parent Component.
בדיוק הפוך מהמצב של ה-Props שמקודם ראינו שה-Parent העביר ל-Child. זה מתבצע בטכניקה של איבנטים, אבל יש פה איזשהו Catch שאנחנו צריכים להבין אותו.
למה לנו בכלל שה-Child יעביר ל-Parent דאטה? אז קורה מצב שה-child component כן יודע משהו, כן יש לו איזשהו data מסוים, כן הוא מתעסק עם איזשהו מידע.
ה-parent שלו, יש לו כל מיני childים, וכשקורה משהו ב-child, ה-child רוצה להעביר ל-parent data בשביל שה-parent יעשה מה שהוא רוצה עם ה-data הזה. בואו נראה דוגמה מציאותית לסיפור הזה, ואז נראה איך אנחנו פותרים את הבעיה הזאת, איך ה-child יכול להעביר ל-parent מידע.
לצורך כך אנחנו רוצים להוסיף עוד קומפוננט, אולי נעשה איזה סכמה ונראה בעצם מה אנחנו רוצים לעשות. מה שאנחנו רוצים לעשות כרגע זה לקחת איזשהו קומפוננט שיודע להציג מעין תמונה מוקטנת כזאת.
Thumbnail זה סוג של תמונה מוקטנת אז בוא נניח שווה הקומפוננט וזאת התמונה שהוא יודע להציג ואם יש לתמונה גם איזשהו טייטל, מרחפים עליה ורואים את הטייטל שלה.
מה שאנחנו רוצים זה להציב את הקומפוננט הזה במספר מקומות בפרנט שלו. פרנט בטח אומר לקומפוננט איזו תמונה להציג ומה הטייטל וכולי, אבל יכול להיות שהמשתמש עושה איזושהי פעולה, פעולת עכבר או קליק או משהו כזה בתוך הקומפוננט, ואז הפרנט רוצה לדעת מזה.
אבל מי זה שיודע שפעולה מסוימת כמו קליק או תזוזה או לא משנה מה התבצע בתוך הקומפוננט? רק הקומפוננט עצמו. פרנט לא יודע שהמשתמש לחץ קליק בתוך איזושהי תמונה ספציפית שנמצאת בתוך ה-child שלו.
רק ה-child יודע את זה. מה קורה אם ה-child רוצה עכשיו להעביר את העובדה הזאת שלחצו עליו בקליק ל-Parent בשביל שה-Parent יעשה משהו מזה.
ואולי גם ה-Child רוצה להגיד לו, תשמע, לחצו עליי ואני תמונה כזאת וכזאת. ואז ה-Parent יגיב כתוצאה לאירוע הזה עם קוד שהוא רוצה, וכמובן ה-Child רוצה לשלוח לו גם דאטה תוך כדי זה שהוא אומר לו, תשמע, לחצו עליי או זזו בתוכי וכולי.
אז אנחנו רוצים to create functional component, אנחנו רוצים קומפוננט שנקרא Thumbnail שמציג לנו תמונה מוקטנת אבל אנחנו לא רוצים להגדיר אותה בתוך ה-Home למה לא למה לא להגדיר את ה-Thumbnail בתוך ה-Home אז הסיבה היא פשוט אם יש לכם קומפוננט שאתם רוצים שהם ישמשו את כלל האתר זה לא יהיה נכון להגדיר אותם באיזשהו אזור ספציפי של האתר.
איפה אנחנו כן רוצים להגדיר אותו? באזור שנקרא Shared, זה מה שמקובל. יש אזור שנקרא Shared, מכיל את המידע המשותף לכלל הקומפוננטות באתר, ושם הגיוני לשים קומפוננטות שאני רוצה שהן יהיו משותפים לכולם.
בנוסף, אני רוצה שהתאמנל שלי יכיל Props, כי אני רוצה שה-Parent יעביר לו את ה-Props, בואו נגיד לו לייצר את זה והנה אני רואה אזור שנקרא Shared, תאמנייל בתוכו והתאמנייל מוכן כבר עם פרופס.
כל מה שאנחנו רוצים לקבל מהפרנט שלנו זה את ה-Image Source, איזה תמונה להציג, זה את ה-Image Title, מה ה-Title של התמונה בשביל להציג עליה, בואו נסתפק רגע בשני החבר'ה האלה.
הנה הפרופס שלנו מוגדר פה ומה שאנחנו רוצים להגדיר לו כאן זה אובייקט תמונה ואנחנו רוצים שהסורס של התמונה יהיה הפרופס נקודה אימג' סורס ואנחנו רוצים שהטייטל של התמונה יהיה פרופס נקודה אימג' טייטל זה בייסיקלי מה שאנחנו רוצים מאוד מאוד פשוט css כדאי שזה יהיה קצת אסתטי כי בכל זאת זה איזושהי תמונה מוקטנת אז בואו נניח שהטיימנל עצמו יש לו בורד 1px Solid Black, יש לו מרג'ין,
בואו ניקח שלושה פיקסלים, יש לו פאדינג, בואו ניקח שלושה פיקסלים, יש לו דיספלי, בואו ניקח אינליין בלוק בכדי שניתן יהיה להציג אותם אחד ליד השני.
בנוסף, התמונה שנמצאת בתוכו, בואו ניתן לה 50 על 50 כי היא תמונה מוקטנת, thumbnail זה תמונה מוקטנת, ובואו ניתן ורטיקל על ליין מידל יש לנו כזה תמונה שהיא די באמצע כזה זה פחות או יותר ה-CSS אנחנו רוצים שיהיו לנו תמונות בואו נראה רגע באסצ מה יש לנו יש לנו רק לוגו אוקיי יש לי פה שלוש תמונות של פבלובה קוויאר ושוקולד
לקחתי אותם שמתי אותם בתוך אימג'ס פרפקט זה נוריד ביי הנה יש לנו פה שלוש תמונות. טאמנייל כמובן שלא יחליט איזו תמונה להציג, זה יהיה מי שמשתמש בו, ומי שמשתמש בו זה ה-Home.
בואו ניגש ל-Home והנה יש לנו פה את ה-Home ואנחנו כאן רוצים, זה אפשר להעיף, זה היה באיזשהו סרטון קודם, טאמנייל בצורה כזאת והנה אנחנו רואים את הטאמנייל פה.
ועכשיו הוא צועק לנו כי הוא אומר לנו, תשמע, אמרת שיש לך פרופס, תביא לי את הפרופס. אז מה שאנחנו רוצים לעשות זה להביא כמובן את שלושת התמונות שלנו. ושלושת התמונות, מה הן היו?
הן היו קרבייר, שוקולד ופבלובה, וזה אמור להיות כאן. בואו נגדיר כאן אימפורט של 10 קרבייר אימג' ואנחנו עולים, עולים, עולים, Assets, Images ופה יש לנו את קו YAR, JPEG, שכפל אותו לשוקולטה, זה אמור להיות פה ויש לנו עוד אחד שזה היה פבלובה והתמונה היא פבלובה.
אז זהו, יש לנו שלוש תמונות. אז עכשיו אנחנו רוצים לשלוח דרך הפרופס את שלושת התמונות, אז יש לנו כאן אימג' סורס, תן לי בבקשה את הקוויאר אימג' טייטל, תגיד לי שזה קוויאר ושכפל אותו, תן לי עוד אחת שהיא התמונה של השוקולד ותגיד לי שהטייטל שלו זה שוקולד תמונה אחרונה, תן לי את
התמונה של הפבלובה, ותגיד לי שזה בא ולא בא מבחינת טייטל. פרפקט, בואו נסתכל רגע מה אנחנו רואים, סדר את זה אולי טיפה. והנה אנחנו רואים שיש לנו שלוש תמונות מוקטנות, טאמניילס כאלה יפות, אין צורך אפילו בבוקס הזה.
נראה טוב. עכשיו אני רוצה להיכנס עם הקונספט של דיווח מהצ'יילד, מהטאמנייל, נניח שהקליקו עליי, לפרנט בשביל שהפרנט יעשה עם זה משהו.
אני כרגע מקליק, פה אנחנו רואים את ה-Title, שזה ה-ToolTip הזה שקופץ לו, אבל אני מקליק עם העכבר ושום דבר לא קורה, כמובן כי לא דיווחנו את זה, וה-Parent, אין לו מושג אם מישהו הקליק ואיפה הוא הקליק בתוך הרכיב.
אז אנחנו צריכים לחזור לפה ולראות איך Child Component יכול לדווח משהו ל-Parent Component שלו, וזה מתבצע על ידי Event. אוקיי, רגע, אבל איך בדיוק?
מה שקורה זה שאנחנו רוצים לקלוט, אני רגע ארווח פה טיפה, אנחנו רוצים לקלוט את הקליק שלחצו על התמונה. זה יהיה onclick.
בסדר, הנה ה-onclick שלנו. אנחנו רוצים להפעיל איזושהי פונקציה משלנו. נניח שאני הולך לפה ובונה איזושהי פונקציה, נקרא לה function image click handler לחצו קליק על התמונה אני כרגע אעשה פה alert test רק בכדי לראות שזה עובד ואני אקח את זה ואני ארשם אליו זה אומר שאם הקליקו על התמונה הפנימית אני רואה test ורק לצורך בדיקה לחצתי על התמונה
הראשונה אני רואה test לחצתי על התמונה השלישית אני רואה test לחצתי על התמונה האמצעית אני רואה test מעולה עכשיו מה שאנחנו רוצים לעשות זה כמובן לא להציג פה alert test טסט אלא לדווח איבנט לפרנט שלנו להגיד לו תשמע יקליקו עליי זה אומר שהפרופס צריך לקבל פונקציה בכדי שהפרנט יעביר לי
פונקציה בדיוק כמו שאני העברתי פונקציה לאיבנט און קליק של האימג' אותו הדבר בדיוק אני רוצה שהפרנט יעשה לי אני אבנה פה אימג' קליק, נקרא לזה קליקט כי זה היה בעבר.
השאלה זה מה הסוג שלו, הסוג שלו זה פונקציה. פונקציה זה דבר כזה, אבל אני לא בדיוק כותב פונקציה אמיתית, אני רוצה לכתוב רק סוג של פונקציה. אז אנחנו שמים פה את הטיפוס המוחזר, הטיפוס המוחזר הוא לא number, הוא void.
נניח, אני מחליט. אז עכשיו מה שאני אומר זה כאשר אני בונה את ה-props צריך להביא לי image source צריך להביא לי image title וצריך להביא לי פונקציה כי זה סוג נתונים שהוא פונקציה שהפונקציה לא מקבלת כלום במקרה הזה תכף אני אשנה את זה ולא מחזירה שום דבר אבל ה-image clicked זה פונקציה שה-parent צריך להביא לי אז מה שאני אעשה כאן זה אקרא לפונקציה.
רגע, איפה הפונקציה נמצאת? בתוך ה-props. image clicked, ככה אני קורא לה, כי הפונקציה לא מקבלת שום דבר.
עכשיו, פרנט, בואו רגע נשים את הפרנט לידי פה. פרנט עכשיו קיבל שגיאות על ה-thumbnail, מפני שלא שלחתי לו שום פונקציה. אני רגע טיפה ארווח פה, ואני אגיד לו, תשמע, אתה צריך להעביר, כמו שהעברת אימג' סורס לכאן והבאת אימג' טייטל לפה, אתה צריך להביא אימג' קליקט כאן.
מה זה אימג' קליקט? זאת פונקציה שצריכה להיות לך בתור פרנט. בוא ניגש רגע לפה ונבנה איזושהי פונקציה שנקראת קליק הנדלר.
נקרא לה ThumbnailClickHandler, רק בשביל לראות שזה באמת משהו אחר. נקרא לה ThumbnailClickHandler בסדר והיא לא מחזירה כלום ואני רוצה לעשות פה הלר טאמב נייל קליקט טאמב נייל קליקט יש לי פה שגיאה עם הטאמב נייל ככה אני אמור לרשום טאמב נייל זהו יופי
עכשיו אני לוקח את הפונקציה הזאת שכמובן לא משנה מה השם שאתם יכולים לתת לה ואני רושם אותה פה.