Меню боковой панели НЕ должно закрываться / закрываться, когда я нажимаю за пределами тела

Question

На самом деле я столкнулся с проблемой, когда я не хочу, чтобы меню моего бокового меню закрывалось, когда я щелкаю где-либо снаружи. прямо сейчас он сворачивается / закрывается, когда я щелкаю в любом месте.

Это мой метод, который распознает, когда пользователь щелкает мышью где-либо вне тела.

import React, { Component } from "react";

class WatchClickOutside extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    componentWillMount() {
        console.log('in comp mount');
        document.body.addEventListener('click', this.handleClick);
    }

    componentWillUnmount() {
        console.log('in comp unmount');

        document.body.removeEventListener('click', this.handleClick);
    }

    handleClick(event) {
        let { container } = this.refs;
        const { onClickOutside } = this.props;

        const { target } = event;
        if (typeof onClickOutside !== 'function') {
            console.log(' in if of onclickoutside');
            return;
        }

        if (target !== container && !container.contains(target)) {
            console.log('clicked outside - fire callback');
            onClickOutside(event); // clicked outside - fire callback
        }
    }

    render() {
        return (
            <div ref="container">
                {this.props.children}
            </div>
        );
    }
}

export default WatchClickOutside;

И это код, в котором я отображаю боковая панель.

import React, { Component } from 'react';
import WatchClickOutside from './watch-outside';


class Sidebar extends Component {

  handleClickOutside = (e) => {
    console.log(e);
    **//WHAT SHOULD I DO HERE TO RESTRICT THE CLOSE OF SIDEBAR ONCLICK**
  }

  render() {
    return (
      <div>
        <WatchClickOutside onClickOutside={this.handleClickOutside}>
          <Nav vertical className="sidebar">
            <UncontrolledDropdown nav inNavbar className="manage-profile">
              <DropdownToggle nav caret className="nav-link" aria-hidden="true">
     SIDEBAR
      </DropdownToggle>
     <DropdownMenu>
                **//DROPDOWN MENU HERE**
       </DropdownMenu>
          </Nav>
       </UncontrolledDropdown>
        </WatchClickOutside>
      </div>
    );
  }
}

export default Sidebar;

Answer 1

Трудно сказать, как ваш пользовательский компонент обрабатывает щелчки, но есть несколько вещей, которые вы можете попробовать.

1:

e.preventDefault()
e.stopPropagation()

внутри handleClickOutside

2:

Обработка mouseDown вместо события click и вызов вышеуказанных функций также могут помочь.

3:

Обработка событий из (1) и (2) внутри Nav вместо переноса в родительский компонент, слушающий тело. Как только щелчки попадают в тело, они уже всплывают от источника и, вероятно, обрабатываются Nav закрытием боковой панели. Суть в том, что вы хотите обрабатывать события ближе к их исходному источнику.

Я бы сказал, что сначала вам следует начать с (3).