likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 14
最近在开发业务需求的时候,有一个场景是点击弹窗之外的区域后,执行某些操作。比如我们常用的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!