Задать вопрос
@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>
    );
};
  • Вопрос задан
  • 732 просмотра
Подписаться 1 Средний 1 комментарий
Решения вопроса 1
Для реализации этого функционала можно воспользоваться "Подъемом состояния". Для этого обработчик закрытия toggleMenuHandler нужно передать в пропсах
<MobileMenu onClose={this.toggleMenuHandler}/>
А внутри MobileMenu поставить обработчик onClick (у вас почему то onClose) props.onClose
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽