Как обнаружить клики за пределами компонента React с помощью пользовательского хука

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

Этот шаблон особенно полезен для таких компонентов, как модальные окна или выдвижные меню.

Обработка кликов за пределами элемента

Предположим, что в вашем приложении есть следующая разметка, и вы хотите закрыть внутренний элемент при нажатии на внешний элемент:

<Внешний элемент>
<Внутренний элемент/>
Внешний элемент>

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

Если цель события не содержит внутреннего элемента, это означает, что событие щелчка не было инициировано внутри внутреннего элемента. В этом случае вы должны удалить или скрыть внутренний элемент из DOM.

Это высокоуровневое объяснение того, как вы обрабатываете клики вне элемента. Чтобы увидеть, как это будет работать в приложении React, вам нужно создать новый проект React с помощью Vite.

Вы можете создать проект, используя другие методы или просто использовать существующий проект.

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

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

Импортировать {использование эффекта, использование ссылки} от"реагировать";
экспортконстанта Главная = () => {
константа внешняя ссылка = useRef();
 использоватьЭффект(() => {
константа дескрипторClickOutside = (е) => {
если (outerRef.current && !outerRef.current.contains (e.target)) {
// Скрыть div или выполнить любое желаемое действие
 }
 };
документ.addEventListener("щелкнуть", обработайтеClickOutside);
возвращаться() => {
документ.removeEventListener("щелкнуть", обработайтеClickOutside);
 };
 }, []);
возвращаться (

ширина: "200 пикселей", высота: "200 пикселей", фон: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Этот код использует хук useRef для создания объекта с именем внешняя ссылка. Затем он ссылается на этот объект через свойство ref элемента div.

Вы можете использовать использованиеЭффект хук, чтобы добавить прослушиватель событий на страницу. Здесь слушатель называет дескрипторClickOutside функция, когда пользователь инициирует событие click. использованиеЭффект hook также возвращает функцию очистки, которая удаляет прослушиватель событий при размонтировании компонента Home. Это гарантирует отсутствие утечек памяти.

Функция handleClickOutside проверяет, является ли цель события элементом div. Объект ref предоставляет информацию об элементе, на который он ссылается, в объекте с именем current. Вы можете проверить это, чтобы увидеть, вызвал ли элемент div прослушиватель, подтвердив, что он не содержит event.target. Если это не так, вы можете скрыть div.

Создание пользовательского хука для обработки кликов вне компонента

Пользовательский хук позволит вам повторно использовать эту функциональность в нескольких компонентах без необходимости определять ее каждый раз.

Этот хук должен принимать два аргумента, функцию обратного вызова и объект ref.

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

Чтобы создать хук, добавьте новый файл с именем useClickOutside в свой проект и добавьте следующий код:

Импортировать { использовать эффект } от"реагировать";
экспортконстанта useOutsideClick = (обратный звонок, исх.) => {
константа дескрипторClickOutside = (событие) => {
если (ref.current && !ref.current.contains (event.target)) {
 перезвонить();
 }
 };
 использоватьЭффект(() => {
документ.addEventListener("щелкнуть", обработайтеClickOutside);
возвращаться() => {
документ.removeEventListener("щелкнуть", обработайтеClickOutside);
 };
 });
};

Этот хук работает так же, как и предыдущий пример кода, который обнаруживал внешние клики внутри компонента Home. Отличие в том, что он многоразовый.

Чтобы использовать его, импортируйте его в домашний компонент и передайте функцию обратного вызова и объект ref.

константа скрытьDiv = () => {
консоль.бревно("Скрытый див");
};
useOutsideClick(closeModal, externalRef);

Этот подход абстрагирует логику обнаружения кликов за пределами элемента и упрощает чтение кода.

Улучшайте взаимодействие с пользователем, обнаруживая клики за пределами компонента

Будь то закрытие раскрывающегося меню, закрытие модального окна или переключение видимости определенных элементов, обнаружение кликов за пределами компонента обеспечивает интуитивно понятный и удобный пользовательский интерфейс. В React вы можете использовать объекты ref и обработчики событий click для создания пользовательского хука, который вы можете повторно использовать в своем приложении.