Как закрыть всплывающее окно при нажатии на другие пункты меню (и при нажатии на любую область вне окна)?

Question

[nivaech]

Есть navbar с несколькими пунктами меню, при нажатии на которые появляется всплывающее окно (отдельный hidden компонет), с помощью подобной функции.

onClickMenu1= () => {
        this.setState(({hide1}) => {
            return {
               hide1: !hide1
            }
        });
    }

let classMenu1 = "dropdown-menu1";
    if (hide1) {
          classMenu1 += " visible";
        };

onClickMenu2= () => {
        this.setState(({hide2}) => {
            return {
               hide2: !hide2
            }
        });
    }

let classMenu2 = "dropdown-menu2";
    if (hide2) {
          classMenu2 += " visible";
        };

Всплывающее окно можно закрыть, если еще раз нажать на пункт меню, а иначе при открытии других окон они просто наслаиваются друг на друга. Как сделать так, чтобы при открытии одного окна другие автоматически закрывались?
Если кто-то еще сможет подсказать, как закрыть это же окно кликаньем на область вне окна - буду признателен.

Answer 1

[Павел Антонов]

componentDidMount() {
        document.addEventListener('click', this.close);
    }
    
    componentWillUnmount() {
        document.removeEventListener('click', this.close);
    }
    
    close = (event) => {
        const domNode = ReactDOM.findDOMNode(this);
        if (!domNode || !domNode.contains(event.target)) {
            this.setState({ isOpened: false });
        }
    }

я у себя так делаю закрытие чего-либо по клику в любом месте