रिएक्ट में मोडल बनाने के लिए चरण-दर-चरण मार्गदर्शिका

एक मॉडल एक संदेश बॉक्स/पॉप-अप है जो स्क्रीन के शीर्ष पर दिखाया जाता है। इनका उपयोग अलर्ट से लेकर इनपुट तक विभिन्न संदर्भों में किया जाता है। इस ब्लॉग में, हम सीखेंगे कि रिएक्ट जेएस में एक मोडल को कैसे लागू किया जाए।

यदि आप बुनियादी बातों पर ध्यान देना चाहते हैं या प्रतिक्रिया के बारे में जानना चाहते हैं, तो नीचे दिए गए ब्लॉग को देखें

रिएक्ट ऐप बनाएं

आइए एक नया रिएक्ट ऐप बनाएं

src में एक नया घटक बनाएं और इसे App.js में आयात करें और नए घटक में कुछ टेक्स्ट और एक बटन जोड़ें। मोडल को पुन: प्रयोज्य बनाने के लिए हम चिल्ड्रन प्रॉप्स का उपयोग कर सकते हैं। मैं इसे अगले ब्लॉग में समझाऊंगा।

शैलियाँ जोड़ना

इसे डायलॉग/मोडल के रूप में प्रदर्शित करने के लिए, आइए src फोल्डर में एक नई CSS फाइल बनाकर कुछ स्टाइलिंग जोड़ें। उस सीएसएस फ़ाइल को हमारे द्वारा जोड़े गए नए घटक में आयात करें।

यह बेहतर दिखता है :)

प्रॉप्स के रूप में फ़ंक्शंस का उपयोग करना:

हमें बूलियन प्रकार का एक useState() हुक बनाने की आवश्यकता है। यह राज्य नियंत्रित करेगा कि मोडल दिखाया जाना चाहिए या नहीं। यदि राज्य मूल्य सत्य है, तो यह मोडल दिखाएगा अन्यथा यह इसे छिपा देगा।

जब उपयोगकर्ता मोडल घटक में बंद करें बटन पर क्लिक करता है तो हमें राज्य के मान को गलत में बदलने की आवश्यकता होती है ताकि यह बंद हो जाए। हम सीधे उस स्थिति को चाइल्ड कंपोनेंट में नहीं बदल सकते क्योंकि स्टेट को पैरेंट कंपोनेंट में परिभाषित किया गया है। हम पैरेंट कंपोनेंट में एक फंक्शन बना सकते हैं और इसे हल करने के लिए चाइल्ड कंपोनेंट को प्रॉप्स के रूप में पास कर सकते हैं। इस फ़ंक्शन को चाइल्ड कंपोनेंट के प्रोप के रूप में पास करें।

अब फंक्शन को डी-कंस्ट्रक्ट करके स्वीकार करें और इसे क्लोज बटन पर ऑन-क्लिक इवेंट में अटैच करें ताकि जब भी हम क्लोज पर क्लिक करें, तो स्टेट वैल्यू फॉल्स में बदल जाए, और मोडल बंद हो जाएगा।

छिपाने का समय

अब जब भी हम क्लोज पर क्लिक करते हैं तो मोडल को छिपाने के लिए लॉजिक को लागू करते हैं। हम सशर्त रूप से UI तभी दिखा सकते हैं जब यह AND (&&) तर्क का उपयोग करके सत्य हो। AND तर्क का उपयोग करके हम मोडल को तभी दिखाएंगे जब वह सत्य हो।

मोडल दिखा रहा है

डिफ़ॉल्ट रूप से, मोडल मान गलत होगा। एक बार क्लिक करने के बाद हमें मोडल दिखाने के लिए App.js में एक बटन जोड़ना होगा। हमें App.js में एक बटन जोड़ने और एक ऑन-क्लिक ईवेंट संलग्न करने की आवश्यकता है जो मोडल दिखाने के लिए राज्य मान को सत्य में बदल देगा।

आप नीचे दिए गए कोड के लिए लिंक पा सकते हैं

मेरा आलेख पढ़ने के लिए धन्यवाद। मुझे आपकी राय जानकर खुशी होगी। मेरे नवीनतम लेखों से अपडेट रहने के लिए मुझे मीडियम पर फॉलो करें। आप मेरे साथ Linkedin पर भी जुड़ सकते हैं । मशीन लर्निंग, डीप लर्निंग और रिएक्ट पर मेरे ब्लॉग देखें।