Question

我阅读了很多“逃生/外部点击时关闭React组件”线程，并且能够立即关闭所有打开的React组件。

但是：打开2个弹出窗口时，我想先关闭一个“顶部”，然后关闭其后面的一个，而不是同时两者。这是应用程序的图片：

Screenshot Application with Popups to close

我的用于关闭组件的自定义钩子的代码：

import { useRef, useEffect } from 'react';

export const useOutsideClick = (ref: any, callback: any, when: boolean) => {
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  });

  const handler = (e: any) => {
    // check if target event is within the ref

    if (ref.current && !ref.current.contains(e.target)) {
      console.log('Handler handling states!');
      savedCallback.current();
    }
  };

  useEffect(() => {
    if (when) {
      document.addEventListener('click', handler);
      return () => document.removeEventListener('click', handler);
    }
  }, [when]);
};

使用useRef，我正在建立与需要关闭的div的连接，并调用useOutsideClick()函数。

有什么想法可以实现一个组件接一个组件的关闭？谢谢和问候！

编辑：问题是，我也可以只关闭一个组件。问题是，这样，应用程序不知道何时单击其他组件，当我单击未渲染任何组件的空间时，它只会注意到单击。

关闭多个React组件-一个接一个

0 个答案: