1

Сейчас реализовано, что при клике на бургер открывается меню и если клик происходит вне этого элемента, меню закрывается, но если нажимать на саму менюшку, то она тоже закроется. Так вот, как сделать чтобы при клике на меню, блок не закрывался? Сначала делал отслеживание на саму менюшку, но тогда при клике на бургер убирается и сражу же добавляется класс open

class Header extends Component {
 constructor(props) {
    super(props);
    this.toggleClass = this.toggleClass.bind(this);

    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);

    this.state = {
        isActive: false
    };
  }
   componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
   }
   componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
   }
   toggleClass() {
    this.setState((prevState) => ({
        isActive: !this.state.isActive
   }));
  }
  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  handleClickOutside(event) {
    if (this.state.isActive && this.wrapperRef && !this.wrapperRef.contains(event.target)) {
        this.setState({isActive:false})
     }
   }
   render() {
    return (
        <header className="header">
            <div className="container">
                <div className="row row__center-item">
                    <div className="col-md-2 col-sm-3 col-xs-4 col-5">
                        <a href="/" className="header__logo">logo</a>
                    </div>
                    <div className={'col-md-offset-1 col-sm-6 menu__mobile' + (this.state.isActive ? ' open' : '')}>  {/* Блок меню*/}
                        <nav>
                            <ul className="menu">
                                <li className="menu__item">
                                    <a href="#about" className="menu__link">Обо мне</a>
                                </li>
                                <li className="menu__item">
                                    <a href="#why" className="menu__link">Почему я</a>
                                </li>
                                <li className="menu__item">
                                    <a href="#services" className="menu__link">Услуги</a>
                                </li>
                                <li className="menu__item">
                                    <a href="#portfolio" className="menu__link">Портфолио</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div className="col-sm-3 col-xs-8 col-7">
                        <a href="tel:+2222" className="header__phone">+2222</a>
                    </div>
                </div>
            </div>
            <div ref={this.setWrapperRef} className={'burger' + (this.state.isActive ? ' open' : '')} onClick={this.toggleClass}>
                <span className="burger__item"></span>
                <span className="burger__item"></span>
                <span className="burger__item"></span>
            </div>
         </header>

Сделал такие изменения и так работает, но правильно ли это

handleClickOutside(e) {
    if (this.state.isActive && this.wrapperRef && !this.wrapperRef.contains(e.target) &&  !this.node.contains(e.target)) {
        this.setState({isActive:false})
    }
}

<div ref={node => this.node = node} className={'col-md-offset-1 col-sm-6 menu__mobile' + (this.state.isActive ? ' open' : '')}>
0

1 ответ 1

0

Просто повесьте обработчик на ваш бургер, и target (html элемент) должен не равняться самому бургеру (html элемент)

const burgerMenu = document.createElement('div')  

const handleMouseClick = (e: MouseEvent) => {
    if (e.target !== burgerMenu) {
      // Тут логика открытия закрытия меню .
    }
  }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.