Ваш диапазон, который вы щелкаете, чтобы скрыть меню, находится внутри диапазона, который вызывает функцию showMenu. Вам нужно вызвать функцию hideMenu с параметром события и использовать функцию stopPropagation в вашей функции hideMenu перед установкой состояния. Таким образом, щелчок по внешней области не является триггером, и только внутренний диапазон получит щелчок.
class SubMainNavbar extends React.Component{
constructor(){
super();
this.state = {isShown:false}
this.showMenu = this.showMenu.bind(this)
this.hideMenu = this.hideMenu.bind(this)
}
showMenu(){
this.setState({isShown: true})
}
hideMenu(event){
event.stopPropagation()
this.setState({isShown: false})
}
render() {
return (
<div className="sub-flex-container">
<div className="co pt-4">
<ul className="flex-container sub-list">
<li>women</li>
<li>mens</li>
<li>health & beauty</li>
</ul>
<span onClick={this.showMenu} className="pl-3 hamburger hide-big pb-4"><Icon type="menu" />
<div className="mobile-menu-display" id="mySidebar" style={{display: this.state.isShown ? 'block' : 'none' }}>
<span onClick={event => this.hideMenu(event)} className="float-right font-weight-bold hide-big close">X</span>
</div>
</span>
</div>
<div className="co">
{/* <a href=""><Logo className="logo" /></a> */}
<a href=""><img className="img-fluid logo" src={Logo} alt="losode logo"/></a>
</div>
<div className="co pt-4">
<span className="hide-small"><SearchInput /></span>
<div className="icon-mobile hide-big">
<ul className="flex-icon sub-flex-container">
<li><ion-icon name="search-outline"></ion-icon></li>
<li><ion-icon name="person-outline"></ion-icon></li>
<li><ion-icon name="basket-outline"></ion-icon></li>
</ul>
</div>
</div>
</div>
);
}
};
export default SubMainNavbar
ps: Вы можете использовать функции стрелок, поэтому вам не нужно использовать конструктор.
Например:
this.state = { isShown: false }
showMenu = () => {
this.setState({isShown: true})
}
hideMenu = event => {
event.stopPropagation()
this.setState({isShown: false})
}