Закрытие нескольких компонентов React - один за другим - PullRequest
Новая
       25

Закрытие нескольких компонентов React - один за другим

0 голосов
/ 04 ноября 2019

Я читаю много веток "Закрыть реагирующий компонент при удачном / внешнем щелчке" и могу закрыть все открытые реагирующие компоненты одновременно.

Но: когда открыты 2 всплывающих окна, я хочу сначала закрыть одно «сверху», затем одно позади него, а не одновременно оба . Вот изображение приложения:

Снимок экрана приложения с всплывающими окнами для закрытия

Мой код для пользовательского хука для закрытия компонентов: 

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().

Есть какие-нибудь идеи, как мне добиться закрытия одного компонента за другим? Спасибо и приветствия!

РЕДАКТИРОВАТЬ: Дело в том, что я также могу закрыть только один компонент. Проблема в том, что, как это, приложение не знает, когда я нажимаю на какой-либо другой компонент, оно просто замечает щелчок, когда я нажимаю на область, где ни один компонент не отображается.

...