כיצד לזהות קליקים מחוץ לרכיב תגובה באמצעות וו מותאם אישית

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

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

טיפול בקליקים מחוץ לאלמנט

בהנחה שיש לך את הסימון הבא ביישום שלך, ואתה רוצה לסגור את האלמנט הפנימי בעת לחיצה על האלמנט החיצוני:

<OuterElement>
<InnerElement/>
OuterElement>

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

אם יעד האירוע אינו מכיל את האלמנט הפנימי, זה אומר שאירוע הקליק לא הופעל בתוך האלמנט הפנימי. במקרה זה, עליך להסיר או להסתיר את האלמנט הפנימי מה-DOM.

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

אתה יכול ליצור את הפרויקט בשיטות אחרות או פשוט להשתמש בפרויקט קיים.

טיפול בקליקים מחוץ לרכיב ביישום React

בבסיס הפרויקט שלך, צור קובץ חדש בשם Home.jsx והוסף את הקוד הבא כדי ליצור div שאמור להסתתר כאשר אתה לוחץ על רכיב המקטע.

יְבוּא { useEffect, useRef } מ"לְהָגִיב";
יְצוּאconst בית = () => {
const outerRef = useRef();
 useEffect(() => {
const handleClickOutside = (ה) => {
אם (outerRef.current && !outerRef.current.contains (e.target)) {
// הסתר את ה-div או בצע כל פעולה רצויה
 }
 };
מסמך.addEventListener("נְקִישָׁה", handleClickOutside);
לַחֲזוֹר() => {
מסמך.removeEventListener("נְקִישָׁה", handleClickOutside);
 };
 }, []);
לַחֲזוֹר (

רוֹחַב: "200 פיקסלים", גוֹבַה: "200 פיקסלים", רקע כללי: "#000" }} ref={outerRef}></div>
 </section>
 );
};

קוד זה משתמש ב-useRef hook כדי ליצור אובייקט בשם outerRef. לאחר מכן, הוא מפנה לאובייקט זה באמצעות תכונת ref של אלמנט div.

אתה יכול להשתמש ב useEffect הוק כדי להוסיף מאזין אירועים לדף. המאזין כאן קורא ל- handleClickOutside פונקציה כאשר משתמש מפעיל את אירוע הקליק. ה useEffect hook מחזירה גם פונקציית ניקוי המסירה את מאזין האירועים כאשר רכיב הבית מתבטל. זה מבטיח שאין דליפות זיכרון.

הפונקציה handleClickOutside בודקת אם יעד האירוע הוא אלמנט ה-div. אובייקט ref מספק את המידע של האלמנט שאליו הוא מפנה באובייקט שנקרא זרם. אתה יכול לבדוק את זה כדי לראות אם רכיב ה-div הפעיל את המאזין על ידי אישור שהוא אינו מכיל את ה-event.target. אם לא, אתה יכול להסתיר את ה-div.

יצירת וו מותאם אישית לטיפול בקליקים מחוץ לרכיב

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

Hook זה צריך לקבל שני ארגומנטים, פונקציית callback ו-ref object.

ב-hook זה, פונקציית ה-callback היא הפונקציה שנקראת כאשר אתה לוחץ על הרווח מחוץ לאלמנט היעד. אובייקט ref מתייחס לרכיב החיצוני.

כדי ליצור את ה-hook, הוסף קובץ חדש בשם השתמש ב-ClickOutside לפרויקט שלך והוסף את הקוד הבא:

יְבוּא { useEffect } מ"לְהָגִיב";
יְצוּאconst useOutsideClick = (התקשרות חוזרת, ref) => {
const handleClickOutside = (מִקרֶה) => {
אם (ref.current && !ref.current.contains (event.target)) {
 התקשר חזרה();
 }
 };
 useEffect(() => {
מסמך.addEventListener("נְקִישָׁה", handleClickOutside);
לַחֲזוֹר() => {
מסמך.removeEventListener("נְקִישָׁה", handleClickOutside);
 };
 });
};

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

כדי להשתמש בו, ייבא אותו לרכיב הבית, והעבירו פונקציית callback ו-ref object.

const hideDiv = () => {
לְנַחֵם.עֵץ("דיסק מוסתר");
};
useOutsideClick (closeModal, outerRef);

גישה זו מפשטת את ההיגיון של זיהוי קליקים מחוץ לאלמנט ומקלה על קריאה של הקוד שלך.

שפר את חווית המשתמש על ידי זיהוי קליקים מחוץ לרכיב

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