Сейчас реализовано, что при клике на бургер открывается меню и если клик происходит вне этого элемента, меню закрывается, но если нажимать на саму менюшку, то она тоже закроется. Так вот, как сделать чтобы при клике на меню, блок не закрывался? Сначала делал отслеживание на саму менюшку, но тогда при клике на бургер убирается и сражу же добавляется класс 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' : '')}>