HOW - 实现 useClickOutside 或者 useClickAway

场景

在开发过程中经常遇到需要点击除某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',}} />);
};