कस्टम हुक का उपयोग करके रिएक्ट घटक के बाहर क्लिक का पता कैसे लगाएं

कई उपयोगकर्ता इंटरफ़ेस ऐसे घटकों का उपयोग करते हैं जो बटन क्लिक जैसी घटनाओं के आधार पर दिखाई देते हैं। जब आप ऐसे घटक के साथ काम करते हैं, तो आप इसे फिर से छिपाने का एक तरीका चाहेंगे, आमतौर पर इसकी सीमा के बाहर एक क्लिक के जवाब में।

यह पैटर्न विशेष रूप से मोडल्स या स्लाइड-इन मेनू जैसे घटकों के लिए उपयोगी है।

किसी तत्व के बाहर क्लिक को संभालना

मान लें कि आपके एप्लिकेशन में निम्नलिखित मार्कअप है, और जब आप बाहरी तत्व पर क्लिक करते हैं तो आप आंतरिक तत्व को बंद करना चाहते हैं:

<बाहरी तत्व>
<आंतरिक तत्व/>
बाहरी तत्व>

किसी तत्व के बाहर क्लिक को संभालने के लिए, आपको इसकी आवश्यकता है एक ईवेंट श्रोता संलग्न करें बाहरी तत्व को. फिर, जब कोई क्लिक इवेंट होता है, तो इवेंट ऑब्जेक्ट तक पहुंचें और उसकी लक्ष्य संपत्ति की जांच करें।

यदि ईवेंट लक्ष्य में आंतरिक तत्व शामिल नहीं है, तो इसका मतलब है कि क्लिक ईवेंट आंतरिक तत्व के भीतर ट्रिगर नहीं किया गया था। इस स्थिति में, आपको DOM से आंतरिक तत्व को हटा देना चाहिए या छिपा देना चाहिए।

यह इस बात की उच्च-स्तरीय व्याख्या है कि आप किसी तत्व के बाहर क्लिक को कैसे संभालते हैं। यह देखने के लिए कि यह रिएक्ट ऐप में कैसे काम करेगा, आपको इसकी आवश्यकता होगी Vite का उपयोग करके एक नया रिएक्ट प्रोजेक्ट बनाएं.

आप अन्य तरीकों का उपयोग करके प्रोजेक्ट बना सकते हैं या बस किसी मौजूदा प्रोजेक्ट का उपयोग कर सकते हैं।

रिएक्ट एप्लिकेशन में किसी तत्व के बाहर क्लिक को संभालना

अपने प्रोजेक्ट के आधार पर, नामक एक नई फ़ाइल बनाएँ होम.जेएसएक्स और एक div बनाने के लिए निम्नलिखित कोड जोड़ें जो अनुभाग तत्व पर क्लिक करने पर छिप जाना चाहिए।

आयात { उपयोग प्रभाव, उपयोग रेफरी } से"प्रतिक्रिया";
निर्यातकॉन्स्ट घर= () => {
कॉन्स्ट आउटररेफ = यूज़रेफ();
 उपयोगप्रभाव(() => {
कॉन्स्ट हैंडलक्लिकआउटसाइड = (इ) => {
अगर (outerRef.current && !outerRef.current.contains (e.target)) {
// div को छुपाएं या कोई वांछित कार्रवाई करें
 }
 };
दस्तावेज़.addEventListener("क्लिक करें", हैंडलक्लिकआउटसाइड);
वापस करना() => {
दस्तावेज़.removeEventListener("क्लिक करें", हैंडलक्लिकआउटसाइड);
 };
 }, []);
वापस करना (

चौड़ाई: "200px", ऊंचाई: "200px", पृष्ठभूमि: "#000" }} रेफरी={आउटररेफ}></div>
 </section>
 );
};

यह कोड नामक ऑब्जेक्ट बनाने के लिए useRef हुक का उपयोग करता है बाहरी रेफरी. इसके बाद यह इस ऑब्जेक्ट को div तत्व की रेफ प्रॉपर्टी के माध्यम से संदर्भित करता है।

आप इसका उपयोग कर सकते हैं उपयोगप्रभाव पेज पर इवेंट श्रोता जोड़ने के लिए हुक करें। श्रोता यहाँ कॉल करता है हैंडलक्लिकआउटसाइड जब कोई उपयोगकर्ता क्लिक ईवेंट ट्रिगर करता है तो कार्य करता है। उपयोगप्रभाव हुक एक क्लीनअप फ़ंक्शन भी लौटाता है जो होम घटक के अनमाउंट होने पर इवेंट श्रोता को हटा देता है। यह सुनिश्चित करता है कि कोई मेमोरी लीक न हो।

हैंडलक्लिकआउटसाइड फ़ंक्शन जांचता है कि ईवेंट लक्ष्य div तत्व है या नहीं। रेफ ऑब्जेक्ट उस तत्व की जानकारी प्रदान करता है जिसे वह करंट नामक ऑब्जेक्ट में संदर्भित करता है। आप यह देखने के लिए इसकी जांच कर सकते हैं कि क्या div तत्व ने श्रोता को यह पुष्टि करके ट्रिगर किया है कि इसमें इवेंट.लक्ष्य शामिल नहीं है। यदि ऐसा नहीं होता है, तो आप div को छुपा सकते हैं।

किसी घटक के बाहर क्लिक को संभालने के लिए एक कस्टम हुक बनाना

एक कस्टम हुक आपको इस कार्यक्षमता को हर बार परिभाषित किए बिना कई घटकों में पुन: उपयोग करने की अनुमति देगा।

इस हुक को दो तर्क, एक कॉलबैक फ़ंक्शन और एक रेफरी ऑब्जेक्ट स्वीकार करना चाहिए।

इस हुक में, कॉलबैक फ़ंक्शन वह फ़ंक्शन है जिसे तब कॉल किया जाता है जब आप लक्ष्य तत्व के बाहर के स्थान पर क्लिक करते हैं। रेफ ऑब्जेक्ट बाहरी घटक को संदर्भित करता है।

हुक बनाने के लिए, नाम की एक नई फ़ाइल जोड़ें बाहर क्लिक करें का उपयोग करें अपने प्रोजेक्ट में निम्नलिखित कोड जोड़ें:

आयात {उपयोगप्रभाव} से"प्रतिक्रिया";
निर्यातकॉन्स्ट उपयोगआउटसाइडक्लिक = (कॉलबैक, रेफरी) => {
कॉन्स्ट हैंडलक्लिकआउटसाइड = (आयोजन) => {
अगर (Ref.current && !ref.current.contains (event.target)) {
 वापस कॉल करें();
 }
 };
 उपयोगप्रभाव(() => {
दस्तावेज़.addEventListener("क्लिक करें", हैंडलक्लिकआउटसाइड);
वापस करना() => {
दस्तावेज़.removeEventListener("क्लिक करें", हैंडलक्लिकआउटसाइड);
 };
 });
};

यह हुक पिछले कोड उदाहरण की तरह ही काम करता है, जो होम घटक के अंदर बाहरी क्लिक का पता लगाता है। अंतर यह है कि यह पुन: प्रयोज्य है।

इसका उपयोग करने के लिए, इसे होम घटक में आयात करें, और कॉलबैक फ़ंक्शन और रेफ ऑब्जेक्ट में पास करें।

कॉन्स्ट HideDiv = () => {
सांत्वना देना।लकड़ी का लट्ठा("हिडन डिव");
};
उपयोगऑउटसाइडक्लिक (क्लोजमॉडल, आउटररेफ);

यह दृष्टिकोण किसी तत्व के बाहर क्लिक का पता लगाने के तर्क को समाप्त कर देता है और आपके कोड को पढ़ने में आसान बना देता है।

किसी घटक के बाहर क्लिक का पता लगाकर उपयोगकर्ता अनुभव में सुधार करें

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