קליטת מידע מהמשתמש בריאקט React Two Way binding
Wishlist, שנוצר עם state בלבד (אפשר בפקודת היצירה להגדיר state, או props ו-state יחד). ב-state יש items, מערך ריק, ו-newItem, מחרוזת ריקה, שאליו נקשרת התיבה.input מסוג טקסט עם placeholder, ו-onChange שקורא ל-textChangedHandler. ה-handler מקבל SyntheticEvent. כדי להגיע לערך מבצעים cast של args.target ל-HTMLInputElement וקוראים value. כל מקש מפעיל את האירוע.this.setState ומציגים בפסקה את this.state.newItem כדי לראות את השינוי בזמן ההקלדה.+ ו-onClick ל-addItemHandler. הוא משכפל את items עם spread, מוסיף את newItem, ומחזיר ל-setState. הגרסה הסופית מוסיפה את הערך תוך כדי השכפול ומאפסת את newItem למחרוזת ריקה.map על this.state.items עם span לכל פריט. כאן הפריט עצמו משמש כ-key, כי הוא לא אמור להופיע פעמיים.newItem התיבה לא התנקתה, כי עד כאן הייתה רק כיוון אחד. מוסיפים לתיבה value={this.state.newItem}. עכשיו כל שינוי ב-state מוחזר לתיבה.onKeyDown שקורא ל-keyPressHandler. ב-args.nativeEvent (מסוג KeyboardEvent) בודקים אם key הוא Enter, ואם כן קוראים ל-addItemHandler.onChange מממש כיוון אחד (תיבה אל state), וה-value מממש את הכיוון השני.input בתוך ה-state עצמו, רק בערך שהוא מחזיק.פרקי ההרצאה: קליטת מידע מהמשתמש בריאקט React Two Way binding
תמלול ההרצאה: קליטת מידע מהמשתמש בריאקט React Two Way binding
הטקסט המלא של הדקות הראשונות בהרצאה «קליטת מידע מהמשתמש בריאקט React Two Way binding» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לכלי הבא של React, כמובן עדיין Basics והכלי הזה זה האפשרות שלנו בריאקט לקלוט מידע מהיוזר על ידי תיבת קלט. איך בעצם ריאקט יכולה לקבל את המידע שהמשתמש הכניס באיזושהי תיבת אינפוט, תיבת טקסט, תיבת נמבר, תיבת אימייל, לא משנה איזה תיבה, ולקחת את המידע הזה אליה.
הקונספט הזה נקרא two-way binding בכל מיני מערכות, איך בדיוק זה מתבצע ב-react. נבנה כרגע קלאס קומפוננט, כי אנחנו צריכים להשתמש פה עם קונספט של state, מפני שאני רוצה לקלוט מידע מהיוזר, ומן הסתם אני רוצה גם להציג אותו נניח, אז אני רוצה לשנות משהו בקומפוננט תוך כדי הפעולה של הקומפוננט, וכמו שראינו זה נושא
שנקרא state. אז יש לנו כאן create class component ואנחנו רוצים בהום לייצר קומפוננט שנקרא בואו נקרא לו wishlist ואגב אם אנחנו רוצים אוטומטית שהמערכת תבנה לנו state אז אנחנו יכולים להגיד לה state אם היינו רוצים גם pops וגם state אז שום בעיה גם props וגם state בבת אחת אנחנו רוצים כרגע רק סטייט,
גו, אז הנה יש לנו כרגע ווישליסט פה ויש לו אינטרפייס עבור הסטייט, הנה הקטע של הפרופס מוכן לנו, הנה אפילו בקונסטרקטור אנחנו רואים שאנחנו יכולים לאפס או להתחל את הסטייט.
ווישליסט בעצם רשימת משאלות שלנו, אנחנו רוצים שיהיה לנו פה אייטמס, מערך, כי יש לנו כל מיני מוצרים שאנחנו רוצים להוסיף לווישליסט, ואנחנו רוצים מוצר חדש לקלוט מהיוזר על ידי תיבת input ולמלא את המערך הזה.
איך אני קולט מידע מהיוזר? אני צריך שיהיה לי פה תיבת input כלשהי, אבל המידע שנקלט מהתיבת input צריך להיכנס פה לאיזשהו משתנה, לא למערך הזה, המערך מחזיק לי כל הפריטים, לא חייב גם שיהיה לי את המערך.
אז אנחנו רוצים שיהיה לנו פה איזשהו new item מסוג string, ולבצע two-way binding, כלומר לקשור את תיבת ה-input שהולכת להיות כאן עם המשתנה הזה שנמצא.
זה מה שאני רוצה שיהיה לי ב-state. מה אני רוצה בקונסטרקטור? אני רוצה לגשת ולהגיד שאין לי כרגע אייטמס, זה יהיה מערך ריק. אני רוצה להגיד שה-new item אין לו כרגע שום דבר, זה מחרוזת ריקה.
בואו רגע נשים את זה בשורה אחת. ויש לנו כרגע state עם כל הפריטים של ה-wishlist שלנו והפריט האחד והיחיד שאנחנו רוצים לקשור לתיבת input שנמצאת פה.
כאן אנחנו רוצים input type טקסט רגיל ובואו ניתן לה איזשהו placeholder my wishlist בצורה כזאת. והשאלה עכשיו שאנחנו צריכים לענות עליה זה איך המידע נכנס מהתיבה לפה בכדי שנוכל אחר כך לשים אותו כאן אנחנו רוצים האמת להציג טוב בואו נעשה את זה בשלבים קודם כל בואו ניקח את המידע מהתיבה
ונכניס אותה לפה איך זה בדיוק אמור להתבצע איך אנחנו קושרים אותה אחד עם השני אז התשובה זה שאנחנו רוצים אירוע שנקרא on change כל פעם שאנחנו לוחצים על מכש בתיבה מופעל אירוע הון צ'יינג' אנחנו רוצים להכניס בתוך האירוע הזה פונקציה בואו נקרא לה text changed handler כמובן שהפונקציה הזאת צריכה להיות לנו איפשהו פה אז בואו ניגש לפה
נבנה פונקציה כזאת הנה הפונקציה הפונקציה תקבל כמובן args מסוג synthetic event מה שראינו בעולם האיבנטים ואני רוצה רגע לבדוק אם זה נכון console.log בוא תציג לי את args אני רוצה אבל לא להציג את ה-args אני רוצה להגיע לvalue שנמצא בתיבה מי זאת התיבה זה האובייקט שקרה לאירוע כשלמדנו
על אירועים ראינו שיש לנו target target זה כל התגית שהעלתה את האירוע אם אני רוצה להגיע לווליו שלה ברמת העיקרון אני צריך לרשום פה value אבל הוא לא יגלה את הvalue כי הוא טייפ סקריפט.
אנחנו צריכים להמיר אותו להגיד לו תקשיב אני יודע שהסוג שלו זה html input element אז תן לי בבקשה להגיע לווליו שלו והנה יש לנו יכולת להשיג את אותו טקסט שנמצא כרגע בתיבה בואו נבדוק את זה רק בשלב הזה.
אני צריך כמובן להציג את ה-wishlist פה, wishlist בצורה כזאת. הנה יש לי פה את התיבה, אוקיי, אני רואה שאני רוצה לתת לה בוקס, בואו ניתן עוד משהו, נעשה אסס, נגיד מרג'ין, תן לי עשרה פיקסלים, תן לי בבקשה את ה-console, ואני מתחיל להקליד a,
והנה אני רואה a, אני ממשיך b, והנה אני רואה a, b, c, והנה אני רואה שכל מקש שאני לוחץ, אני מקבל את הטקסט.
אנחנו מתחילים להגיע לשם. אוקיי, קיבלתי את הטקסט, זה בסדר. אני רוצה לקחת את הטקסט ולשים אותו פה ב-new item, לפני שנתעסק עם כל ה-items.
איך אנחנו לוקחים את הטקסט ומכניסים אותו לניו אייטם. טוב, זה לא בעיה. במקום להציג אותו בקונסול, קח אותו, קח את כל זה לתוך אייטם, בואו נקרא לו כבר ניו אייטם, ואז אנחנו רוצים to דיססט סטייט את הניו אייטם והוא יחליף את הניו אייטם הקיים לו בסטייט.
זאת אומרת, אם אני עכשיו בא ורוצה רק לנסות, אני שם פה איזה ספן ואני אומר לו תשמע תציג לי בבקשה את מה שיש לך בדיס נקודה סטייט נקודה ניו אייטם תוך כדי ההקלדה הזאת אנחנו אמורים לראות כאן את השינוי ואני בכלל לא הולך לסטייט שימו לב ואני מתחיל להקליד ושימו לב שאני מיד רואה את הסטייט הצלחנו להשתמש בו והכנסנו אותו
לכאן. זה נראה בסדר אבל יש פה עוד משהו שכדאי לבצע אבל תכף תכף נראה את זה קודם כל את זה אני לא צריך אני רוצה להוריד אותו ומה שאני רוצה לעשות זה עוד לחצן אפשר רגע את זה אולי טיפה לרווח ואת זה אולי לשים לא נשאיר אותו כאן יותר טוב אני רוצה עוד לחצן או בטון ואני אני רוצה שיהיה כתוב עליו פלוס זה אומר שכאשר אתם לוחצים על הלחצן הזה אני רוצה להוסיף
את הפריט לליסט הזאת זה המטרה בפלוס בואו ניקח כאן onclick וניתן דיסט נקודה אד אייטם אנדלר זאת פונקציה נכתוב אותה פה פרייבט שווה אין לי צורך לקבל ארגס ומה שאנחנו רוצים לעשות זה לקחת את הפריט הזה שכבר נמצא לי בסטייט ראינו שהוא כבר נמצא לי בסטייט ופשוט להוסיף אותו לליסט כשלמדנו
על סטייט ראינו שאם יש לי איזה שהיא ליסט או מערך אז אני צריך לשכפל אותו. בואו ניקח ונשכפל את ה-items על ידי spread operator, this.state.items ובנוסף גם נוסיף אליו, אוקיי, נשתמש בטכניקה הזאת, האמת בואו נעשה את זה בשני שלבים. קודם כל אני הולך ל-items.push ואני מוסיף אליו this.state.new item,
זה מותר כי אני רק קורא אותו, אני לא כותב אליו, ואני מוסיף אותו למערך החדש ששכפלתי ואז אני מוסיף אותו לstate this.set state בצורה כזאת אז המערך החדש הפריט יתווסף למערך החדש שלנו זאת אומרת שאם אני אציג כאן console.log של כרגע זה יהיה items אז אנחנו אמורים לראות את הפריט שהתווסף למערך אייטמס בואו רגע נפתח ונלחץ
פה a a a go והנה אני רואה שיש לי a a a b b b go והנה אני רואה שיש לי את שני הפריטים c c c go והנה שלושה הפריטים עובד בואו נציג אותו ניקח פה איזושהי פסקה ונגיד כזה דבר this.state.items תמיר לי כל פריט אייטם לספאן תן לי בספאן תן לי את האייטם עצמו עם איזשהו קו הפרדה ואתם זוכרים בטח שאנחנו צריכים איזשהו קי אין לי כרגע צורך באיזשהו אייטם חזק או קי חזק אז פשוט תן לי גם את
האייטם בתוך הקי כי אני לא אמור להציג את אותם נתונים פעמיים למרות שיכולנו לקחת פה איזשהו אינדקס אבל זה מספק אותנו. בואו נבדוק כרגע מה אנחנו רואים a a go b b b go c c go עובד perfect זה הווישליסט שלנו ואנחנו מצליחים להוסיף את הפרטים כמו שצריך אני רוצה עכשיו להוסיף פה עוד איזה משהו ברגע שלחצו על הלחצן תאפס לי
את המידע בתיבה הלחצן זה זה מה אני רוצה לעשות בלחצן אנחנו רוצים לאפס את הnew item האמת מקודם אמרתי שאני אעשה את זה בשני שלבים ולא הראתי את השלב השני, אז בואו נעשה עכשיו את השלב השני, לא באמת היינו צריכים לעשות פה פוש, יכלנו לעשות את הטריק שראינו בסרטון הקודם, וזה לשים אותו פה.
אז כאילו שכפלתי את המערך והוספתי עליו עוד פריט, זה מיותר עכשיו, זה קצת יותר הגיוני. בנוסף אני רוצה לגשת ל-new item ולהכניס אליו מחוז, זאת אומרת ברגע שלחצו על הלחצן לקחתי את המערך שכפלתי אותו הוספתי את הפריט החדש שהיה
בניו אייטם למערך הזה החזרתי את המערך הזה לסטייט וניקיתי את הפריט ניו אייטם זה אנחנו כבר לא צריכים בואו נבדוק אם זה עובד איי איי גו לא עובד ביבי גו לא עובד זאת אומרת הוא כן מוסיף את זה לרשימת הפריטים הוא כן מנקה את הניו אייטם אנחנו יכולים להוכיח את זה אם נשים פה עוד איזו פסקה עם די סטייט ניו אייטם בצורה כזאת ואנחנו נראה שהוא כן מנקה אותו איי איי איי
בום ניקה בי בי בי ניקה סי סי סי ניקה אוקיי הוא מוסיף אותם למערך תראו את הפסקה השנייה הוא מנקה הוא מוסיף את זה לפסקה הראשונה מנקה את הפסקה השנייה זה בסדר אבל הוא לא החזיר לנו את זה או הוא לא החזיר את ה-value בחזרה לתיבה, זאת אומרת הוא כן הצליח לנקות את הפריט New Item מה-State, אבל הוא לא עדכן את זה בתיבה עצמה.
זאת הסיבה שהקונספט הזה נקרא Two-Way Binding, ואנחנו עשינו רק One-Way כרגע. כאשר היוזר כתב טקסט בתיבה, עשינו one way, שינינו ב-on-change את ה-new item של ה-state.
כאשר מישהו אחר, נניח הלחצן, משנה את ה-new item שב-state, אנחנו רוצים להחזיר את השינוי בחזרה לתיבה. זה החלק השני של הביינדינג, וזה מאוד פשוט.