אירועים בתוך class component ב-React
this עלולה להישבר, ובהרצאה מבינים למה ומה הפתרון. כדי להבין את הבעיה, המרצה מראה אותה קודם ב-JavaScript רגיל.Recommended שיורשת מ-Component, עם render שמחזירה את אותו JSX.render, כי היא מורצת פעמים רבות ונבנית מחדש. היא יכולה להיות private. כדי לקרוא לה מ-render כותבים this.clickHandler. גם הפרמטר SyntheticEvent כמו קודם.private item עם הערך red wine. ניגשים אליו עם this.item.item של undefined. כלומר, this בתוך הפונקציה הוא undefined.this נשבר ב-JavaScriptmyButton עם addEventListener ל-click. בתוך ה-handler this הוא הכפתור. אבל אם צובעים את הרקע בתוך setTimeout אחרי שנייה, this.style קורס.this תלוי במי שקורא לפונקציה. את הפונקציה של setTimeout מפעיל האובייקט window, ולכן this שם הוא window, גם אם הפונקציה כתובה בתוך ה-handler של הכפתור.this במשתנה, למשל that, ומשתמשים בו. השם that נפוץ ושאלה שחוזרת בראיונות, ו-self לא מומלץ כי כבר קיים משתנה כזה.bind: פונקציה היא אובייקט ואפשר לקרוא לו bind עם הערך ש-this יהיה בתוכה. זה אלגנטי יותר ממשתנה עזר. ב-React אפשר לעשות bind(this) על ה-handler, וזה עובד.this של הסקופ החיצוני אליה. זו הדרך הנפוצה והמועדפת, וההבדל מפונקציה רגילה אינו רק תחבירי.clickHandler = (args: SyntheticEvent) => {...}. הסקופ החיצוני הוא המחלקה, ולכן this.item עובד והציג "Red Wine". מתעלמים מ-render, שמוגדרת כפונקציה רגילה כי היא דורסת את הפונקציה של Component.פרקי ההרצאה: אירועים בתוך class component ב-React
תמלול ההרצאה: אירועים בתוך class component ב-React
הטקסט המלא של הדקות הראשונות בהרצאה «אירועים בתוך class component ב-React» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז אחרי שראינו איך אנחנו יכולים להשתמש באיבנטים בפונקצ'ונל קומפוננט, בואו נראה איך אנחנו יכולים לעשות את זה בקלאס קומפוננט.
ניקח רגע את כל הקטע קוד הזה, נשים אותו בהערה, ואנחנו רוצים לבוא לפה, בואו נראה מה אנחנו צריכים, את זה אנחנו צריכים, נשים אותו כאן, ואנחנו רוצים לבנות קלאס שנקראת recommended, ממש אותו הדבר כמו שהיה לנו מקודם, Extends Component בצורה כזאת,
נבנה לנו את ה-Render, ניקח את הקוד שהיה בתוך ה-Return, סליחה, כולל ה-Return, ונשים פה, נוריד אותו מההערה, נסדר את הקוד.
אז יש לנו כרגע Class Recommended, את זה נשים פה בצורה כזאת. כאן אנחנו רוצים שיהיה לנו את אז מה שאנחנו עושים ב-class component כאשר אנחנו מתעסקים עם איבנטים זה אנחנו רוצים לבנות את הפונקציה של האיבנט לא בתוך הרנדר, זה לא יהיה נכון לבנות אותה בתוך הרנדר כי הרנדר מתבצעת, היא יכולה להתבצע הרבה פעמים,
אנחנו לא רוצים שהוא כל פעם יבנה את הפונקציה, כמו שזה קרה כאן לדוגמה אלא אנחנו רוצים את הפונקציה ברמת הקלאס קודם כל זה הבדל אחד הפונקציה לא חייבת להיות פאבליק היא יכולה להיות פרייבט אז בואו נבנה את הפונקציות אותה פונקציה שהייתה מקודם קראנו לה קליק הנדלר אני אקח אותה אני אשים אותה פה והיא יכולה לקבל גם את אותו סינתטיק איבנט שמקודם היה אני אקח אותו אני אשים אותו בתוך
הפונקציה כמובן אנחנו צריכים גם את זה להדליק הוא לא מגלה לי אותו, טוב לא מגלה, אני אקח אותו בעצמנו ואנחנו רוצים לשים אותו פה ומה שאני רוצה זה console.log ולהציג את ה-args, האמת שזה אני כן רוצה וזה וזה אני לא רוצה כרגע, יש פה עוד נקודה מעניינת, בגלל שהפונקציה נמצאת ב-class אז כמובן אם אני ב-class ואני רוצה
להגיע למשהו שנמצא בתוך ה-class, אני צריך דיס. אז אני אקח דיס נקודה גליק איבנט כאן לא הייתי צריך את הדיס בפונקצ'יונל קומפוננט כי לא הייתי בתוך קלאס.
בואו נראה אם זה עובד. אז אני רוצה לראות את אותו קוד בואו רגע נרפרש אותו משגיאות קודמות נריץ ואני רואה את הסינתטיק איבנט עובד מגניב נראה שהכל עובד כמו שצריך.
נעשה הלרט ו-function works, נקרא לזה event works, אז אני רוצה רגע לרפרש, אני לוחץ עליו והוא כותב לי event works, והנה יש לנו יכולת להפעיל פונקציה על ידי event, כאשר אנחנו ב-class component ולא ב-function component, נכון פשוט?
אז זהו, שלא כל כך, כלומר כן, אבל יש פה משהו שעדיין לא טיפלנו בו. מה? הצגנו מקודם. הצגנו מקודם את המשתנה הזה, Red Wine.
אני גם רוצה להציג אותו. רגע, זה לא בדיוק אותו דבר כמו מקודם. איפה אני אבנה את המשתנה? מקודם לא בניתי את המשתנה בתוך הפונקציה, בניתי אותו מחוץ לפונקציה.
אני גם רוצה לבנות אותו מחוץ לפונקציה, יכולתי לבנות אותו בתוך הפונקציה ולעשות אלרט שלו, בסדר, אבל יכולנו גם שיהיה לנו משתנה פה בחוץ ולהביא לי אותו מהסרבר בלי קשר לאיבנט ואז להציג אותו אותו דבר אני רוצה כאן מה זה אומר מחוץ לפונקציה מחוץ לפונקציה זה אומר בתוך הקלאס טוב מה הבעיה בואו נבנה משתנה אני לא צריך שהוא יהיה public נקרא לו private
אייטם וניתן לו red wine ושימו לב שזה עבד לנו perfect go event works מעולה בוא תציג לי את אייטם אני לא יכול להציג את אייטם בצורה כזאת אם אני נמצא בתוך קלאס ואני רוצה להגיע למשתנים ברמת הקלאס, אז אני צריך this נקודה, הנה האייטם שלנו.
מגניב, למה אני בכלל אומר שזה בעיה? זה כזה פשוט. זה לא. שימו לב, שגיאה. וואו, איזה דרמטי.
קרס לי פה, קרס לי פה, טוב שלא פירמט לי את המחשב. מה בעצם הוא עשה? הוא אומר לי, תשמע, אני לא יכול לקרוא אייטם על משהו שהוא undefined.
מבחינתו היה פה משהו אונדיפיינד. הוא אומר, אייטם אין לי על אונדיפיינד. רגע, this הוא אונדיפיינד? למה this הוא אונדיפיינד? יש פה איזושהי בעיה שאנחנו צריכים לטפל בה.
בשביל להבין מה בדיוק הבעיה ואיך צריך לטפל בה, כאשר אנחנו נמצאים כמובן ב-class component, לא הייתה לנו את הבעיה הזאת ב-functional component, הכנתי פה איזו תוכנית קטנה נפרדת לגמרי.
יש לי פה html, יש לי פה JavaScript רק ב-HTML כל מה שאני רוצה לעשות זה איזה שהוא לחצן נקרא לו טסט ואני רוצה לתת לו איזה שהוא ID מייבטן נניח ואני רוצה עכשיו לגשת לג'אווה סקריפט נשים את הג'אווה סקריפט רגע פה וברגע שהסקריפט נטען אני רוצה לגשת ללחצן שלנו דרך אגב נשים את הסקריפט אולי בסוף שקודם כל הוא יכיר את הלחצן ורק אז הוא יטען לי את הסקריפט כי
ממש פה אני רוצה לחפש את הלחצן הזה אפשר גם לעשות את זה ואפשר גם להגדיר פה את הפקודה דיפר כלומר תדחה תדחה את ההוצאה לפועל של הסקריפט לסוף הבאדי זה ממש אותו הדבר ואז אתה כבר תכיר את הלחצן אז מה שאני רוצה לעשות פה זה לקחת את המיי באטן הזה דוקיומנט חפש לי אותו בבקשה בבקשה הנה הוא תירשם לאירוע שלו add event listener תחפש אירוע קליק תירשם אליו תן לי את הפונקציה הזאת
ובואו נעשה פה alert test זאת אומרת אם אנחנו מריצים כרגע את הקוד הזה אנחנו בעצם אמורים ללחוץ עליו ולראות טסט וזה עובד פרפקט בואו נראה כמה דברים מעניינים לגבי זה המטרה זה להבין מה הייתה הבעיה שם בקוד שלנו מה שאני רוצה לעשות זה לא לא בדיוק אלרט טסט, גם מקודם אלרט טסט עבד לנו.