Menutup modal atau lungsur turun pada klik Luar atau tatal.

Pernah membina modal atau lungsur turun dan bergelut untuk memikirkan cara menutupnya apabila pengguna mengklik di luarnya? Ya..

Inilah cangkuk reaksi yang hebat untuk anda yang boleh menanganinya

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;

Kail ini menggunakan useRef untuk menyasarkan elemen DOM dan mencetuskan panggilan balik pada klik luar atau acara tatal, memastikan pembersihan yang betul dengan useEffect. Ia mengembalikan ref untuk lampiran mudah pada mana-mana elemen DOM.

Berikut ialah contoh penggunaan

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;

Atas ialah kandungan terperinci Menutup modal atau lungsur turun pada klik Luar atau tatal.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!