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',
    }} />
  );
};
相关推荐
eric*16887 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼23 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路44 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
qq_589568101 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤2 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app