외부 클릭 또는 스크롤 시 모달 또는 드롭다운을 닫습니다.

모달이나 드롭다운을 구축한 후 사용자가 외부를 클릭하면 닫는 방법을 알아내려고 애쓴 적이 있나요? 응..

이를 처리할 수 있는 멋진 반응 후크가 있습니다

import { useEffect, useRef } from "react";

const useOutsideClickOrScroll = <T extends HTMLElement>(
  callback: () => void
) => {
  const ref = useRef<T>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        callback();
      }
    };

    const handleScroll = () => {
      callback();
    };

    document.addEventListener("mousedown", handleClickOutside);
    window.addEventListener("scroll", handleScroll, true);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      window.removeEventListener("scroll", handleScroll, true);
    };
  }, [callback]);

  return ref;
};

export default useOutsideClickOrScroll;

이 후크는 useRef를 사용하여 DOM 요소를 대상으로 하고 외부 클릭이나 스크롤 이벤트에 대해 콜백을 트리거하여 useEffect로 적절한 정리를 보장합니다. 모든 DOM 요소에 쉽게 연결할 수 있도록 참조를 반환합니다.

샘플 사용법은 다음과 같습니다

import React, { useState } from "react";
import useOutsideClickOrScroll from "./useOutsideClickOrScroll";

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleClose = () => {
    setIsOpen(false);
  };

  const ref = useOutsideClickOrScroll<HTMLDivElement>(handleClose);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && (
        <div ref={ref}>
          <p>Dropdown Content</p>
        </div>
      )}
    </div>
  );
};

export default Dropdown;

위 내용은 외부 클릭 또는 스크롤 시 모달 또는 드롭다운을 닫습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!