[小程序]点击组件之外关闭组件

[思路] 收集组件内所有元素的uid数组，判断点击事件的id是否在该uid数组内

直接上代码 (这是一个工具Hooks)

import { useEffect, useState } from 'react';

const useOnClickOutside = (
  containerId: string, // 组件所在整个页面的 id
  ref: any, // 要控制组件的ref
  handler: (e?: Event) => void, 点击元素之外的事件
) => {
  const [domIds, setDomIds] = useState<string[]>([]); // uid数组

// 收集组件内部的所有uid
  const collectInnerDomIds = (currentNode: any) => {
    let currentIds = domIds;
    currentIds.push(currentNode.uid);
    const list = new Set([...currentIds]); 
    setDomIds([...list]);
    if (currentNode.childNodes.length > 0) {
      currentNode.childNodes.map((item: any) => {
        collectInnerDomIds(item);
      });
    }
  };

  useEffect(() => {
    const container = document.getElementById(containerId);
    const listener = (e: Event) => {
      if (ref.current) {
        collectInnerDomIds(ref.current);
        if (domIds.includes(e?.mpEvent.target.id)) {
          console.log('inner');
        } else {
          console.log('out');
          handler(e);
        }
        return;
      }
    };
    container?.addEventListener('touchstart', listener, false);
    return () => {
      container?.removeEventListener('touchstart', listener);
    };
  }, [ref, handler]);
};

export default useOnClickOutside;

下面是组件中的使用

  useOnClickOutside('details', historyNamesRef, (e: Event) => {
    // 点击组件之外的事件
  });