Как да открием щраквания извън компонент на React с помощта на персонализирана кука

Много потребителски интерфейси използват компоненти, които се появяват въз основа на събития като щракване върху бутон. Когато работите с такъв компонент, ще искате начин да го скриете отново, обикновено в отговор на щракване извън неговата граница.

Този модел е особено полезен за компоненти като модални или плъзгащи се менюта.

Обработка на щраквания извън елемент

Ако приемем, че имате следното маркиране във вашето приложение и искате да затворите вътрешния елемент, когато щракнете върху външния елемент:

<Външен елемент>
<InnerElement/>
Външен елемент>

За да обработвате щраквания извън елемент, трябва прикачете слушател на събитие към външния елемент. След това, когато възникне събитие за щракване, отворете обекта на събитието и прегледайте целевото му свойство.

Ако целта на събитието не съдържа вътрешния елемент, това означава, че събитието за кликване не е задействано във вътрешния елемент. В този случай трябва да премахнете или скриете вътрешния елемент от DOM.

Това е обяснение на високо ниво за това как обработвате щраквания извън елемент. За да видите как това ще работи в приложение на React, ще трябва създайте нов проект React с помощта на Vite.

Можете да създадете проекта с други методи или просто да използвате съществуващ проект.

Обработка на кликвания извън елемент в React приложение

В основата на вашия проект създайте нов файл, наречен Home.jsx и добавете следния код, за да създадете div, който трябва да се скрие, когато щракнете върху елемента раздел.

импортиране {useEffect, useRef} от"реагира";
износконст Начало = () => {
конст outerRef = useRef();
 useEffect(() => {
конст handleClickOutside = (д) => {
ако (outerRef.current && !outerRef.current.contains (e.target)) {
// Скриване на div или извършване на всяко желано действие
 }
 };
документ.addEventListener("клик", handleClickOutside);
връщане() => {
документ.removeEventListener("клик", handleClickOutside);
 };
 }, []);
връщане (

ширина: "200px", височина: "200px", заден план: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Този код използва куката useRef, за да създаде обект с име outerRef. След това препраща към този обект чрез свойството ref на елемента div.

Можете да използвате useEffect кука за добавяне на слушател на събития към страницата. Слушателят тук се обажда на handleClickOutside функция, когато потребител задейства събитието щракване. The useEffect hook също така връща функция за почистване, която премахва слушателя на събития, когато компонентът Home се демонтира. Това гарантира, че няма изтичане на памет.

Функцията handleClickOutside проверява дали целта на събитието е елементът div. Обектът ref предоставя информацията за елемента, към който препраща, в обект, наречен current. Можете да го проверите, за да видите дали елементът div е задействал слушателя, като потвърдите, че не съдържа event.target. Ако не стане, можете да скриете div.

Създаване на персонализирана кука за обработка на щраквания извън компонент

Персонализирана кука би ви позволила да използвате повторно тази функционалност в множество компоненти, без да се налага да я дефинирате всеки път.

Тази кука трябва да приема два аргумента, функция за обратно извикване и обект ref.

В тази кука функцията за обратно извикване е функцията, която се извиква, когато щракнете върху интервала извън целевия елемент. Обектът ref препраща към външния компонент.

За да създадете куката, добавете нов файл с име useClickOutside към вашия проект и добавете следния код:

импортиране {useEffect} от"реагира";
износконст useOutsideClick = (обратно обаждане, реф) => {
конст handleClickOutside = (събитие) => {
ако (ref.current && !ref.current.contains (event.target)) {
 обратно извикване();
 }
 };
 useEffect(() => {
документ.addEventListener("клик", handleClickOutside);
връщане() => {
документ.removeEventListener("клик", handleClickOutside);
 };
 });
};

Тази кука работи по същия начин като предишния пример с код, който открива външни щраквания в компонента Home. Разликата е, че е за многократна употреба.

За да го използвате, импортирайте го в началния компонент и предайте функция за обратно извикване и референтен обект.

конст hideDiv = () => {
конзола.log(„Скрит div“);
};
useOutsideClick (closeModal, outerRef);

Този подход абстрахира логиката на откриване на кликвания извън елемент и прави вашия код по-лесен за четене.

Подобрете потребителското изживяване чрез откриване на кликвания извън компонент

Независимо дали става въпрос за затваряне на падащо меню, отхвърляне на модал или превключване на видимостта на определени елементи, откриването на кликвания извън компонент позволява интуитивно и безпроблемно потребителско изживяване. В React можете да използвате реф обектите и манипулаторите на събития с щракване, за да създадете персонализирана кука, която можете да използвате повторно във вашето приложение.