React自定义hook之:useClickOutside——判断是否点击DOM之外区域
最近在开发业务需求的时候,有一个场景是点击弹窗之外的区域后,执行某些操作。比如我们常用的github左上角的搜索框,当点击了搜索框之外的区域以后,搜索框就会自动取消搜索并收缩起来。
经过调研发现使用useRef+浏览器事件绑定可以实现这一需求,并且可以将这一功能抽象为自定义hook。
本文将首先介绍如何用传统方式实现这一需求,然后介绍如何抽象成自定义hook,最后结合typescript类型,完善这一自定义hook。
实现检测点击对象外区域
import React, { useEffect, useRef } from "react";
const Demo: React.FC = () => {
// 使用useRef绑定DOM对象
const domRef = useRef<HTMLDivElement>(null);
// 组件初始化绑定点击事件
useEffect(() => {
const handleClickOutSide = (e: MouseEvent) => {
// 判断用户点击的对象是否在DOM节点内部
if (domRef.current?.contains(e.target as Node)) {
console.log("点击了DOM里面区域");
return;
}
console.log("点击DOM外面区域");
};
document.addEventListener("mousedown", handleClickOutSide);
return () => {
document.removeEventListener("mousedown", handleClickOutSide);
};
}, []);
return (
<div
ref={domRef}
style={{
height: 300,
width: 300,
background: "#bfa",
}}
></div>
);
};
export default Demo;
代码不难理解,首先我们在函数式组件里面写了一个长度和宽度都是300像素的正方形,然后创建了一个名为domRef的对象将其绑定到dom节点上,最后在useEffect钩子里面声明handleClickOutSide的方法判断用户是否点击了指定的DOM区域,并使用document.addEventListener方法添加事件监听,组件卸载时清理事件监听。在实现的过程中,最核心的是利用了Ref对象上的contains方法,经过研究发现,Node.contains方法是浏览器的原生方法,其主要的作用是判断传入的DOM节点是否为该节点的后代节点。
使用基本方式实现后,接着封装自定义hook。
封装useClickOutside hook
大家在理解自定义hook时不用心生畏惧,无非就是调用了其他hook的普通函数,下面来看代码实现:
import { RefObject, useEffect } from "react";
const useClickOutside = (ref: RefObject<HTMLElement>, handler: Function) => {
useEffect(() => {
const listener = (event: MouseEvent) => {
if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
return;
}
handler(event);
};
document.addEventListener("click", listener);
return () => {
document.removeEventListener("click", listener);
};
}, [ref, handler]);
};
export default useClickOutside;
可以看到,代码将判断是否点击了DOM之外区域的逻辑都抽离出来,这样在使用时,只需要把DOM节点传递给useClickOutside即可,自定义hook的第二个参数接收一个回调函数,可以在回调函数里面做各种事情。来看一下使用自定义hook后的代码:
import React, { useRef } from "react";
import useClickOutside from "../hooks/useOnClickOutside";
const Demo: React.FC = () => {
// 使用useRef绑定DOM对象
const domRef = useRef<HTMLDivElement>(null);
useClickOutside(domRef, () => {
console.log("点击了外部区域");
});
return (
<div
ref={domRef}
style={{
height: 300,
width: 300,
background: "#bfa",
}}
></div>
);
};
export default Demo;
可以看到,组件的代码得到大大的简化,而且抽离出来的自定义hook可以在其他组件中复用。但到这一步有优化的空间吗?当然有的,那就是在类型定义方面,可以使用泛型进行优化。在刚才编写的useClickOutside自定义hook中,对ref对象的定义是:RefObject<HTMLElement>,这种定义其实是不合理的,因为HTMLElement不够具体,有可能传入的是HTMLDivElement或者是HTMLAnchorElement,也有可能是HTMLSpanElement,这里我们可以使用泛型对其加以限制。
使用泛型优化类型定义
import { RefObject, useEffect, useRef } from 'react'
export function useOnClickOutside<T extends HTMLAnchorElement>(
node: RefObject<T | undefined>,
handler: undefined | (() => void)
) {
const handlerRef = useRef<undefined | (() => void)>(handler)
useEffect(() => {
handlerRef.current = handler
}, [handler])
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (node.current?.contains(e.target as Node) ?? false) {
return
}
if (handlerRef.current) handlerRef.current()
}
document.addEventListener('mousedown', handleClickOutside)
return () => {
document.removeEventListener('mousedown', handleClickOutside)
}
}, [node])
}
优化后的hook里,使用泛型T指代传入的类型继承自HTMLElement,这样在声明ref对象的时候就可以用T指代传入的DOM类型,使用泛型可以加强对传入参数的约束,大家在项目开发中可以多加尝试。在handleClickOutside方法中,使用了双问号??判断,双问号的意思是如果前面的部分为undefined则返回后面的内容,也就是false。本文最后完整版的useClickOutside hook借鉴了uniswap开源项目项目地址
谢谢阅读,如果觉得不错,欢迎点赞o( ̄▽ ̄)d!
转载自:https://segmentfault.com/a/1190000042032561