HOW - 实现 useClickOutside 或者 useClickAway

场景

在开发过程中经常遇到需要点击除某div范围之外的区域触发回调:比如点击 dialog 外部区域关闭。

手动实现

typescript 复制代码
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

使用:

typescript 复制代码
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

typescript 复制代码
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',
    }} />
  );
};
相关推荐
誰能久伴不乏21 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html
gis收藏家2 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端