React 监听元素外的点击事件，自定义hook

const useClickOutside = (
  refObject: React.RefObject<HTMLElement>,
  popperRef: React.RefObject<HTMLElement>,
  callback: () => void
) => {
  const onClickOutsideHandler = (e: MouseEvent) => {
    if (
      !refObject?.current?.contains(e.target as Node) &&
      !popperRef?.current?.contains(e.target as Node)
    ) {
      callback();
    }
  };
  useEffect(() => {
    document.addEventListener('mousedown', onClickOutsideHandler);
    return () =>
      document.removeEventListener('mousedown', onClickOutsideHandler);
  }, []);
};

callback方法为获取到指定元素外的点击事件后要执行的方法

参考链接javascript - Detect click outside React component - Stack Overflow