تستجيب معظم تطبيقات الويب لأحداث النقر بطريقة أو بأخرى ، ويعد اكتشاف مكان حدوث النقر بالضبط أمرًا حيويًا لواجهة المستخدم الخاصة بك لتعمل بشكل جيد.

تستخدم العديد من واجهات المستخدم المكونات التي تظهر بناءً على أحداث مثل نقرة الزر. عندما تعمل مع مثل هذا المكون ، ستحتاج إلى طريقة لإخفائه مرة أخرى ، عادةً استجابةً لنقرة خارج حدوده.

هذا النمط مفيد بشكل خاص للمكونات مثل الوسائط أو القوائم المنزلقة.

التعامل مع النقرات خارج العنصر

بافتراض أن لديك الترميز التالي في التطبيق الخاص بك ، وتريد إغلاق العنصر الداخلي عند النقر فوق العنصر الخارجي:

<العنصر الخارجي>
<العنصر الداخلي/>
العنصر الخارجي>

للتعامل مع النقرات خارج عنصر ما ، فأنت بحاجة إلى ذلك إرفاق مستمع الحدث للعنصر الخارجي. بعد ذلك ، عند حدوث حدث نقرة ، قم بالوصول إلى كائن الحدث وفحص الخاصية الهدف الخاصة به.

إذا كان هدف الحدث لا يحتوي على العنصر الداخلي ، فهذا يعني أن حدث النقر لم يتم تشغيله داخل العنصر الداخلي. في هذه الحالة ، يجب إزالة أو إخفاء العنصر الداخلي من DOM.

هذا شرح عالي المستوى لكيفية التعامل مع النقرات خارج العنصر. لمعرفة كيفية عمل ذلك في تطبيق React ، ستحتاج إلى ذلك إنشاء مشروع React جديد باستخدام Vite.

instagram viewer

يمكنك إنشاء المشروع باستخدام طرق أخرى أو ببساطة استخدام مشروع موجود.

التعامل مع النقرات خارج عنصر في تطبيق التفاعل

في قاعدة مشروعك ، قم بإنشاء ملف جديد يسمى الصفحة الرئيسية. jsx وأضف الكود التالي لإنشاء div يجب إخفاؤه عند النقر فوق عنصر القسم.

يستورد {useEffect، useRef} من"تتفاعل";

يصدّرمقدار ثابت الصفحة الرئيسية = () => {
مقدار ثابت OuterRef = useRef () ،

useEffect (() => {
مقدار ثابت handleClickOutside = (ه) => {
لو (OuterRef.current &&! outsideRef.current.contains (e.target)) {
// إخفاء div أو تنفيذ أي إجراء مطلوب
}
};

وثيقة.addEventListener ("انقر"، handleClickOutside) ؛

يعود() => {
وثيقة.removeEventListener ("انقر"، handleClickOutside) ؛
};
}, []);

يعود (


عرض: "200 بكسل", ارتفاع: "200 بكسل", خلفية: "#000" }} المرجع = {OuterRef}> </div>
</section>
);
};

يستخدم هذا الرمز موضع الإضافة في الإضافة useRef لإنشاء كائن مسمى خارجي. ثم يشير إلى هذا الكائن عبر خاصية ref لعنصر div.

يمكنك استخدام ال useEffect ربط لإضافة مستمع الحدث إلى الصفحة. المستمع هنا يدعو مقبض تعمل عندما يقوم المستخدم بتشغيل حدث النقر. ال useEffect يُرجع hook أيضًا وظيفة تنظيف تزيل مستمع الحدث عند فك المكون الرئيسي. هذا يضمن عدم وجود تسرب للذاكرة.

تتحقق الدالة handleClickOutside مما إذا كان هدف الحدث هو عنصر div. يوفر الكائن ref معلومات عن العنصر الذي يشير إليه في كائن يسمى Current. يمكنك التحقق منه لمعرفة ما إذا كان عنصر div قد قام بتشغيل المستمع عن طريق التأكد من أنه لا يحتوي على event.target. إذا لم يحدث ذلك ، يمكنك إخفاء div.

إنشاء خطاف مخصص للتعامل مع النقرات خارج أحد المكونات

يسمح لك الخطاف المخصص بإعادة استخدام هذه الوظيفة في مكونات متعددة دون الحاجة إلى تعريفها في كل مرة.

يجب أن يقبل هذا الخطاف وسيطتين ، دالة رد ، وكائن ref.

في هذا الخطاف ، وظيفة رد الاتصال هي الوظيفة التي يتم استدعاؤها عند النقر فوق المساحة الموجودة خارج العنصر الهدف. يشير كائن المرجع إلى المكون الخارجي.

لإنشاء الخطاف ، أضف ملفًا جديدًا باسم useClickOutside إلى مشروعك وأضف الكود التالي:

يستورد {useEffect} من"تتفاعل";
يصدّرمقدار ثابت useOutsideClick = (رد الاتصال ، المرجع) => {
مقدار ثابت handleClickOutside = (حدث) => {
لو (ref.current &&! ref.current.contains (event.target)) {
أتصل مرة أخرى()؛
}
};

useEffect (() => {
وثيقة.addEventListener ("انقر"، handleClickOutside) ؛

يعود() => {
وثيقة.removeEventListener ("انقر"، handleClickOutside) ؛
};
});
};

يعمل هذا الخطاف بنفس طريقة مثال الرمز السابق ، الذي اكتشف النقرات الخارجية داخل مكون الصفحة الرئيسية. الفرق هو أنه قابل لإعادة الاستخدام.

لاستخدامه ، قم باستيراده في المكون الرئيسي ، وقم بتمرير وظيفة رد الاتصال وكائن المرجع.

مقدار ثابت hideDiv = () => {
وحدة التحكم.سجل("div المخفي");
};

useOutsideClick (closeModal، OuterRef) ؛

يستخلص هذا النهج منطق اكتشاف النقرات خارج عنصر ويجعل الكود الخاص بك أسهل في القراءة.

تحسين تجربة المستخدم عن طريق اكتشاف النقرات خارج المكون

سواء تم إغلاق قائمة منسدلة ، أو رفض شكلي ، أو تبديل رؤية عناصر معينة ، فإن اكتشاف النقرات خارج أحد المكونات يسمح بتجربة مستخدم بديهية وسلسة. في React ، يمكنك استخدام الكائنات ref والنقر فوق معالجات الأحداث لإنشاء خطاف مخصص يمكنك إعادة استخدامه عبر تطبيقك.