React自定义hook之:useClickOutside——判断是否点击DOM之外区域

最近在开发业务需求的时候,有一个场景是点击弹窗之外的区域后,执行某些操作。比如我们常用的github左上角的搜索框,当点击了搜索框之外的区域以后,搜索框就会自动取消搜索并收缩起来。

React自定义hook之:useClickOutside——判断是否点击DOM之外区域

经过调研发现使用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!

发表评论

相关文章