关于react.js: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(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 (
    

  );
};

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, 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(null);

  useClickOutside(domRef, () => {
    console.log("点击了内部区域");
  });

  return (
    

  );
};

export default Demo;

能够看到，组件的代码失去大大的简化，而且抽离进去的自定义hook能够在其余组件中复用。但到这一步有优化的空间吗？当然有的，那就是在类型定义方面，能够应用泛型进行优化。
在方才编写的useClickOutside自定义hook中，对ref对象的定义是：RefObject,这种定义其实是不合理的，因为HTMLElement不够具体，有可能传入的是HTMLDivElement或者是HTMLAnchorElement，也有可能是HTMLSpanElement，这里咱们能够应用泛型对其加以限度。

应用泛型优化类型定义

import { RefObject, useEffect, useRef } from 'react'

export function useOnClickOutside(
  node: RefObject,
  handler: undefined | (() => void)
) {
  const handlerRef = useRef 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(￣▽￣)ｄ！