Как при клике по ссылке закрыть меню?

Question

[nickname13384]

Есть проект на react js (SPA), есть кнопка открытия/закрытия меню, в нем есть навигация по сайту, как сделать чтобы по клике на ссылку меню закрывалось?

class Header extends Component {

state = {
	menu: false
}

toggleMenuHandler = () => {
	this.setState({
		menu: !this.state.menu
	})
}
	render() {
		return (
			<header id="header">
				<div className="container">
					<div className="header">
						<Logo/>
						<Menu/>
						<User/>
						<MobileMenu
						isOpen={this.state.menu}
						/>
						<ToggleMenu
	        	onToggle={this.toggleMenuHandler}
	        			/>
					</div>
				</div>
			</header>
		)
	}
}
// Меню

const MobileMenu = (props) => {
	const cls = ['mobile-menu'];
	 if(!props.isOpen) {
    	cls.push('close')
    }
    return (
    	<div className={cls.join(' ')}
    		onClose={props.onClose}
    		>
	        <User/>
	        <Menu/>   // Ссылки находятся в этом компоненте UL>LI>A
	        <button className="log-out">Sign Out</button>
        </div>
    );
};

Comments

[4mobile]

toggleMenuHandler прокиньте в меню и вызывайте по клику на ссылку

Answer 1

[Денис Богданов]

Для реализации этого функционала можно воспользоваться "Подъемом состояния". Для этого обработчик закрытия toggleMenuHandler нужно передать в пропсах
<MobileMenu onClose={this.toggleMenuHandler}/>
А внутри MobileMenu поставить обработчик onClick (у вас почему то onClose) props.onClose