אירועים בריאקט - Events
Recommended עם משתנה item שערכו Red Wine, שבעתיד יגיע מהשרת, וכפתור "recommend a product". הקומפוננט מוצג בתוך box בדף הבית.onclick עם מחרוזת שקוראת לפונקציה. ב-React משתמשים ב-onClick ב-camelCase, כי מדובר באובייקט JavaScript ולא ב-DOM עצמו. הערך הוא ביטוי בסוגריים מסולסלים, ורושמים את שם הפונקציה בלי לקרוא לה, בלי סוגריים.clickHandler, שמקובל לסיים את שמה ב-handler, ובתוכה למשל alert(item). לחיצה מציגה את המוצר.args, אחרים e או event. בהתחלה מגדירים אותו any, ואחר כך מחליפים בטיפוס מדויק.SyntheticEvent: console.log מראה שהטיפוס הוא SyntheticBaseEvent. זו מעטפת ש-React יוצרת על האירוע המקורי והיא זהה לכל סוגי האירועים. המרצה משתמש ב-SyntheticEvent.nativeEvent הוא האירוע המקורי של HTML, שהיה MouseEvent. target הוא הרכיב שהעלה את האירוע, כאן הכפתור. בשביל לראות אותו כאובייקט ולא כתגית משתמשים ב-console.dir. עם cast כמו as HTMLButtonElement אפשר לגשת בביטחון ל-innerHTML שלו.onClick ולהשמיט סוגריים מסולסלים. המרצה מעדיף פונקציה נפרדת, כי בדרך כלל יש יותר מפקודה אחת.onClick עם c קטנה לא יעבוד.args: למשל כדי לדעת איפה העכבר נמצא או מי העלה את האירוע.פרקי ההרצאה: אירועים בריאקט - Events
תמלול ההרצאה: אירועים בריאקט - Events
הטקסט המלא של הדקות הראשונות בהרצאה «אירועים בריאקט - Events» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו עוברים לכלי הבסיסי הבא של ריאקט וזה איבנטים אירועים איך אנחנו מתמודדים עם אירועים כאשר אנחנו רוצים שרכיבי ה-HTML יבצעו איזשהו אירוע, אירוע קליק, אירוע Mouse Move, לא משנה איזה אירוע, איך אנחנו יכולים לתפוס את האירועים האלה בריאקט ולכתוב קוד שיתבצע כתגובה לאירועים האלה.
בואו נראה את זה ב-Component חדש, אנחנו בסרטון הזה הולכים לראות את זה, איך לבצע את זה ב-Functional Component. בסרטון הבא, איך לבצע את זה ב-Class Component, כי אלו שתי דרכים שונות.
אז אנחנו רוצים לייצר לעצמנו, בואו נעשה קריאייט, Functional Component בתוך Home, בוא תייצר לי קומפוננט עבור מומלצים, Recommended.
אין צורך בפרופס, ואני מריץ. בואו ניגש לפה, והנה יש לנו את ה-recommended המלצות, מה אנחנו רוצים לראות.
ובואו נניח שיש לנו כאן איזשהו משתנה, אייטם שאנחנו רוצים להמליץ עליו, והיום האייטם הוא Red Wine, זה ההמלצות שלנו, וזה כמובן יכול להגיע בהמשך מאיזשהו שרת מרוחק, כרגע זה Hardcoded, אבל כשנראה איך להביא דברים משרת מרוחק, כמובן נוכל ללכת ולהביא אותם.
אנחנו רוצים, שירענו פה איזשהו לחצן. מה שאנחנו רוצים לבצע בלחצן זה recommend a product. תמליץ לי על איזשהו מוצר וכמובן שילחצו עליו אני אראה את זה כי זה היה כאילו הלכנו לשרת והבאנו את האייטם שאנחנו רוצים להמליץ עליו.
בואו רק נגדיר כאן שאנחנו רוצים את זה כבוקס בכדי לראות את זה בצורה ברורה כקומפוננט נפרד ואם היינו בעולם ה html האמיתי והיינו רוצים לכתוב אירוע onclick לבטן אז פשוט היינו רושמים onclick וזה לא מה שאנחנו רושמים עכשיו כשהיינו ב html רשמנו onclick וקראנו לאיזושהי פונקציה do something עם סוגריים
כאילו שזה קריאה לפונקציה לא כאילו באמת זאת כאילו קריאה לפונקציה אני אומר את המילה כאילו, אבל זה באמת, ואצלנו זה לא ככה. לא, לא, לא, אנחנו לא עושים את זה. מה שאנחנו עושים זה משתמשים באטריביוטס מוכנים של React, שזה בעצם אותם שמות של האירועים האמיתיים של HTML,
אבל הם ב-Camel Case. כלומר, אם ב-HTML היה on-click, אז React יש לה on-click עם סי גדולה. אז קודם כל זה הבדל ראשון, לא יעבוד לנו עם all-click עם סי קטנה כי אנחנו לא ניגשים לדום בעצמנו הבטן הזה זה לא באמת אובייקט דום זה אובייקט JavaScript שמכיל עותק של הדום האמיתי ואנחנו רוצים לגשת אליו בצורה כזאת on-click בצורה כזאת.
עוד הבדל זה שאנחנו לא מכניסים אליו מחרוזת עם איזושהי פונקציה אלא סוגריים מסולסליים כלומר ערך interpolation ואנחנו לא קוראים לפונקציה פה, אלא רק רושמים אותה, וזה ההבדל.
זאת אומרת, אם יש לי פה איזושהי פונקשן, נקרא לה קליק הנדלר. הרבה פעמים מקובל שאירועים בראיית הסתיימו במילה הנדלר, זה לא חובה, אבל זה מקובל, והיא לא מחזירה לי שום דבר, ומה שאנחנו היינו עושים ב-HTML זה פשוט קוראים
לה מפה. אנחנו לא רוצים לקרוא לה, אנחנו רוצים לרשום אותה. אני רק לוקח אותה, אני לא קורא לה בעצמי, אני לוקח את השם שלה, מכניס את זה ל-onclick.
עכשיו אני יכול כאן לרשום alert-item והוא יציג לי את האייטם. בואו נשים את ה-recommended הזה ב-home, ניגש ל-home, נשים אותו פה, recommended, ואז אנחנו אמורים לראות את הלחצן, קצת יותר מדי צמוד לי בוא נגדיר שיש לנו פה padding של 10 פיקסלים אולי יופי ואני לוחץ על הלחצן והנה אני רואה את המוצר
שאנחנו ממליצים עליו כרגע בחנות דחיצה מפעיל את זה הכל עובד כמו שצריך את זה אפשר לסגור כאשר אנחנו קראנו לפונקציה היא התבצעה אבל מה שלחנו לה אנחנו רואים שלא קיבלנו שום דבר אבל האמת יכולה לקבל משתנה.
חלק אוהבים לקרוא לו E, חלק אוהבים לקרוא לו Event, Env, אני אוהב לקרוא לו args כי זה args בצורה כזאת, סליחה, args בצורה כזאת, מפני שזה ארגומנדים שנשלחים ל-Event.
בגלל שאני נמצא ב-TabScript אז הוא מחייב אותי כרגע להגדיר טיפוס נתונים.