ריאקט עובדת טוב מאוד עם מידע שזורם מפקד מיכל לפקדים פנימיים. בשביל להעביר מידע בכיוון השני תצטרכו לכתוב Callbacks ולהעביר אותם לפקד הפנימי. התוסף Value Link עוזר להתמודד עם בעייה זו ויכול לחסוך לכם הרבה קוד.

1. העברת מידע דו-כיוונית ללא התוסף

על מנת לעדכן State של פקד מיכל מתוך פקד פנימי עלינו להעביר פונקציית Callback. הפונקציה מוגדרת בפקד המיכל אך יפעיל אותה הפקד הפנימי בכל אירוע Change. כך זה נראה:

מאחר ופקדים רבים צריכים התנהגות זו, ריאקט מציעה Addon שיבנה עבורכם את הפונקציה ללא מאמץ.

2. קשירת מידע דו-כיוונית באמצעות ReactLink

נתחיל עם הקוד:

במקום להשתמש ב value בחרנו במאפיין valueLink. שימו לב שפקדי ריאקט מכירים מאפיין זה (כלומר, לא מדובר בשם שהמצאנו). השימוש ב valueLink מיועד לעבודה עם פקדי קלט סטנדרטיים של ריאקט בלבד.

הפונקציה linkState מחזירה אובייקט מסוג ReactLink. אובייקט זה כולל פונקציית onChange אוטומטית שמסתכלת על target.value וקוראת ל setState של הפקד, על פי הפרמטר שהעברתם. במקרה שלנו הפרמטר נקרא text ולכן הקוד שיופעל בתגובה לשינוי הוא:

setState({ text: e.target.value })

שזה בדיוק הקוד שרשמנו ידנית בגירסא הקודמת.

הכנסנו לפקד את ה Mixin שנקרא React.addons.LinkedStateMixin. תוסף זה כולל את פונקציית linkState בה השתמשנו עבור ה input.

שימו לב שכדי להשתמש בתוסף עליכם לטעון את הספריה react-with-addons (במקום react). כלומר כך תיראה תגית ה script המתאימה:

<script src="http://fb.me/react-with-addons-0.13.1.js"></script>

 

3. שימוש ב ReactLink עם Range

כל פקדי הקלט של ריאקט יודעים לעבוד עם ReactLink. כך למשל נראה שימוש בפקד Range:

4. שימוש ב ReactLink עם Check Box

עבור פקדי Check Box הערך value איננו המצב (דלוק או מכובה) אלא הטקסט שישלח לשרת במידה ויבוצע submit לטופס. מסיבה זו, אם רוצים לקשור בין checkbox למשתנה בוליאני נצטרך להשתמש במאפיין checkedLink. כך למשל נראה קוד שמאפשר הצגה או הסתרה של חלון פרטים נוספים על פי סימון ב Checkbox: