場景

在開發過程中經常遇到需要點擊除某div范圍之外的區域觸發回調：比如點擊 dialog 外部區域關閉。

手動實現

import { useEffect } from "react"/*** A custom hook to detect clicks outside a specified element.* @param ref - A React ref object pointing to the element to detect outside clicks.* @param callback - A callback function triggered when a click outside is detected.*/
const useClickOutside = (ref: React.RefObject<HTMLElement>,callback: () => void
) => {useEffect(() => {const handleClickOutside = (event: MouseEvent) => {if (ref.current && !ref.current.contains(event.target as Node)) {callback()}}document.addEventListener("mousedown", handleClickOutside)return () => {document.removeEventListener("mousedown", handleClickOutside)}}, [ref, callback])
}export default useClickOutside

使用：

const [visible, toggle] = useToggle(false)
const triggerRef = useRef<HTMLDivElement | null>(null)
useClickOutside(triggerRef, () => toggle(false))<div ref={triggerRef} onClick={toggle}>{trigger}
</div>

react-use: useClickAway

https://github.com/streamich/react-use/blob/master/docs/useClickAway.md

import {useClickAway} from 'react-use';const Demo = () => {const ref = useRef(null);useClickAway(ref, () => {console.log('OUTSIDE CLICKED');});return (<div ref={ref} style={{width: 200,height: 200,background: 'red',}} />);
};