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

1. הצגת חלון מודאלי בתור State

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

בשביל המימוש מצב היישום צריך לכלול מאפיין בוליאני שיקבע האם הדיאלוג כרגע מוצג או לא. פקודת render תצייר את הדיאלוג כ div לפי ערך המשתנה. לחיצה על כפתור במסך תעדכן את הערך לאמת וכך תגרום להצגת הדיאלוג, ולחיצה על אישור בדיאלוג תעדכן את הערך חזרה לשקר ותגרום לסגירתו.

הקודפן הבא משתמש ב CSS בלבד בשביל להציג חלון שנראה מודאלי. אני לא ממליץ לקחת אותו כמו שהוא מאחר והחלון לא נגיש ולא ריספונסיבי, ובטח כולל המון מקרי קצה לא מטופלים. המטרה יותר להמחיש את הרעיון. הפונקציה setText של הפקד הראשי נקראת בכל פעם שטקסט חדש מוזן בדיאלוג, והפונקציה closeModal של הפקד הראשי נקראת בכל פעם שהדיאלוג נסגר:

2. רעיונות להרחבה

באמצעות שמוש ב Higher Order Components אפשר היה להרחיב את הפתרון ולייצר פקד גנרי שמוסיף תיבות דיאלוג לפקדים. זה לא לגמרי פשוט, כי תוכן תיבת הדיאלוג צריך להיות ניתן להתאמה ולכן גם הממשק בין הפקד לתיבה המודאלית שהוא מציג צריך להגיע כפרמטר.

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