Реагировать на крючки

useClickOutside Подцепить в React

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

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

Что такое хук в React?

Хуки — это новое дополнение к React 16.8, которое позволяет вам использовать состояние и другие функции React без написания класса. Хуки — это функции, которые позволяют вам «подключаться» к функциям состояния и жизненного цикла React из функциональных компонентов. Хук useEffect — это встроенный в React хук, который позволяет запускать побочные эффекты в функциональных компонентах.

Понимание проблемы

Допустим, у вас есть модальное окно, которое появляется, когда пользователь нажимает кнопку. Вы хотите скрыть модальное окно, когда пользователь щелкает за его пределами. Вот как вы можете решить эту проблему, используя собственный хук useClickOutside:

  1. Прикрепите прослушиватель событий щелчка к документу, когда модальное окно открыто.
  2. Проверьте, находится ли цель события клика за пределами модального окна.
  3. Если цель события клика находится за пределами модального окна, активируйте функцию обратного вызова.

Создание крючка useClickOutside

Давайте создадим хук useClickOutside шаг за шагом:

Начните с импорта хука useEffect из React:

import { useEffect } from 'react';

Определите хук useClickOutside:

const useClickOutside = (ref, callback) => {
  const handleClick = (event) => {
    if (ref.current && !ref.current.contains(event.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);

    return () => {
      document.removeEventListener('click', handleClick);
    };
  });
};

В этом коде мы определяем функцию с именем useClickOutside, которая принимает два аргумента: ref и callback. ref — это ссылка на элемент, клики за пределами которого вы хотите отслеживать, а callback — это функция, которая должна запускаться, когда происходит щелчок за пределами элемента.

Внутри хука useClickOutside мы определяем функцию handleClick, которая проверяет, находится ли цель события клика за пределами отслеживаемого элемента. Если это так, мы вызываем функцию callback.

Мы используем хук useEffect, чтобы присоединить функцию handleClick к событию click документа. Мы также возвращаем функцию очистки, которая удаляет прослушиватель событий при размонтировании компонента.

Добавьте к вашему компоненту хук useClickOutside:

import React, { useRef } from 'react';

const Modal = ({ onClose }) => {
  const ref = useRef();

  useClickOutside(ref, onClose);

  return (
    <div className="modal" ref={ref}>
      <h1>Modal Content</h1>
    </div>
  );
};

В этом коде мы импортируем React и хук useRef из React. Мы также импортируем хук useClickOutside, который мы только что определили.

Внутри компонента Modal мы создаем ссылку на модальное окно, используя хук useRef. Мы передаем эту ссылку и функцию обратного вызова onClose в хук useClickOutside, который запускает функцию onClose, когда пользователь щелкает за пределами модального окна.