自定义hooks---useClickAway

useClickAway作用：监听目标元素外的事件（默认是点击事件）。

function useClickAway(fn, ref) {
  useEffect(() => {
    const listener = () => {
      // 不存在目标元素，或 当前点击的元素在目标元素内，则不处理传入的回调函数。
      // contains()方法返回一个布尔值，表示一个节点是否是给定节点的后代.
      if (!ref.current || ref.current.contains(event.target)) return;
      fn();
    };
    // 注册监听事件
    document.addEventListener('click', listener);
    return () => {
      // 卸载监听事件
      document.removeEventListener('click', listener);
    };
  }, [ref]);
}

使用：

  const [counter, setCounter] = useState(0);
  const ref = useRef();

  useClickAway(() => {
    setCounter((state) => state + 1);
  }, ref);

  return (
    <div>
      <div>{`count:${counter} `} </div>
      <div ref={ref}>点我啊 dd </div>
    </div>
  );