نحوه تشخیص کلیک های خارج از کامپوننت React با استفاده از یک هوک سفارشی

اکثر برنامه‌های وب به هر طریقی به رویدادهای کلیک پاسخ می‌دهند، و تشخیص دقیق محل کلیک برای عملکرد خوب رابط کاربری شما حیاتی است.

بسیاری از رابط های کاربری از اجزایی استفاده می کنند که بر اساس رویدادهایی مانند کلیک دکمه ظاهر می شوند. وقتی با چنین مؤلفه‌ای کار می‌کنید، می‌خواهید دوباره آن را پنهان کنید، معمولاً در پاسخ به کلیکی خارج از مرز آن.

این الگو به ویژه برای مؤلفه هایی مانند مدال ها یا منوهای اسلاید به کار می رود.

مدیریت کلیک های خارج از یک عنصر

با فرض اینکه نشانه گذاری زیر را در برنامه خود دارید و می خواهید با کلیک بر روی عنصر خارجی، عنصر داخلی را ببندید:

<OuterElement>
    <InnerElement/>
</OuterElement>

برای مدیریت کلیک‌های خارج از یک عنصر، باید یک شنونده رویداد را به عنصر خارجی متصل کنید. سپس، هنگامی که یک رویداد کلیک رخ می دهد، به شی رویداد دسترسی پیدا کنید و ویژگی هدف آن را بررسی کنید.

اگر هدف رویداد حاوی عنصر داخلی نباشد، به این معنی است که رویداد کلیک در عنصر داخلی فعال نشده است. در این حالت، باید عنصر داخلی را از DOM حذف یا پنهان کنید.

این یک توضیح سطح بالا از نحوه مدیریت کلیک‌های خارج از یک عنصر است. برای اینکه ببینید چگونه این کار در یک برنامه React کار می کند، باید یک پروژه React جدید با استفاده از Vite ایجاد کنید.

می توانید پروژه را با استفاده از روش های دیگر ایجاد کنید یا به سادگی از یک پروژه موجود استفاده کنید.

مدیریت کلیک های خارج از یک عنصر در یک برنامه React

در پایه پروژه خود، یک فایل جدید به نام Home.jsx ایجاد کنید و کد زیر را برای ایجاد یک div اضافه کنید که با کلیک بر روی عنصر بخش، باید پنهان شود.

import { useEffect, useRef } from "react";

export const Home = () => {
  const outerRef = useRef();

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (outerRef.current && !outerRef.current.contains(e.target)) {
        // Hide the div or perform any desired action
      }
    };

    document.addEventListener("click", handleClickOutside);

    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, []);

  return (
    <section>
      <div style={{ width: "200px", height: "200px", background: "#000" }} ref={outerRef}></div>
    </section>
  );
};

این کد از هوک useRef برای ایجاد یک شی به نام outerRef استفاده می کند. سپس از طریق ویژگی ref عنصر div به این شی ارجاع می دهد.

می توانید از قلاب useEffect برای اضافه کردن شنونده رویداد به صفحه استفاده کنید. شنونده در اینجا زمانی که کاربر رویداد کلیک را راه‌اندازی می‌کند، تابع handleClickOutside را فراخوانی می‌کند. قلاب useEffect همچنین یک تابع پاکسازی را برمی‌گرداند که شنونده رویداد را هنگام جدا شدن مؤلفه Home حذف می‌کند. این تضمین می کند که هیچ نشتی حافظه وجود ندارد.

تابع handleClickOutside بررسی می کند که آیا هدف رویداد عنصر div است یا خیر. شی ref اطلاعات عنصری را که به آن ارجاع می دهد در یک شی به نام جریان ارائه می کند. می‌توانید آن را بررسی کنید تا ببینید آیا عنصر div شنونده را با تأیید اینکه شامل event.target نیست، فعال کرده است یا خیر. اگر اینطور نیست، می توانید div را پنهان کنید.

ایجاد یک قلاب سفارشی برای رسیدگی به کلیک های خارج از یک جزء

یک قلاب سفارشی به شما این امکان را می دهد که از این قابلیت در چندین مؤلفه بدون نیاز به تعریف هر بار استفاده مجدد کنید.

این هوک باید دو آرگومان، یک تابع callback و یک شی ref را بپذیرد.

در این قلاب، تابع callback تابعی است که وقتی روی فضای خارج از عنصر هدف کلیک می‌کنید، فراخوانی می‌شود. شی ref به جزء بیرونی ارجاع می دهد.

برای ایجاد قلاب، یک فایل جدید با نام useClickOutside به پروژه خود اضافه کنید و کد زیر را اضافه کنید:

import { useEffect } from "react";
export const useOutsideClick = (callback, ref) => {
  const handleClickOutside = (event) => {
    if (ref.current && !ref.current.contains(event.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClickOutside);

    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  });
};

این قلاب همانند نمونه کد قبلی عمل می کند که کلیک های بیرونی را در داخل مؤلفه Home شناسایی می کند. تفاوت این است که قابل استفاده مجدد است.

برای استفاده از آن، آن را در مؤلفه اصلی وارد کنید، و یک تابع callback و یک شی ref ارسال کنید.

const hideDiv = () => {
  console.log("Hidden div");
};

useOutsideClick(closeModal, outerRef);

این رویکرد منطق تشخیص کلیک‌های خارج از یک عنصر را انتزاعی می‌کند و خواندن کد شما را آسان‌تر می‌کند.

با تشخیص کلیک های خارج از یک جزء، تجربه کاربر را بهبود بخشید

تشخیص کلیک‌های خارج از یک مؤلفه، خواه بسته شدن یک منوی کشویی، رد کردن یک مدال یا تغییر وضعیت دید برخی از عناصر باشد، امکان تجربه کاربری بصری و بدون درز را فراهم می‌کند. در React، می‌توانید از اشیاء ref استفاده کنید و کنترل‌کننده‌های رویداد را کلیک کنید تا یک هوک سفارشی ایجاد کنید که می‌توانید در برنامه‌تان دوباره از آن استفاده کنید.

منبع مقاله