Состояние showMenu продолжает возвращать false, оно не обновляется.
После того, как мой console.log в родительском файле, состояние продолжает возвращать false, в то время как я явно обновляю его в функции toggleMenu ().
Может кто-нибудь объяснить, как решить эту проблему?
(Также, как я могу передать это новое состояние обратно в мой дочерний класс, чтобы изменить там мой класс CSS?)
Пожалуйстане перенаправляйте меня на связанные вопросы в stackoverflow, я уже проверил многие из них, но не совсем понял концепцию, поэтому пример будет высоко оценен.Заранее спасибо
CHILD COMPONENT
class GeneralNav extends Component {
state = {
showMenu: false
};
render() {
return (
<EasyFlexRow style="row-space-between header-nav-justify-content nav-fixed">
<div
className="nav-burger-box menu-action"
onClick={this.props.toggleMenu}
>
<div className="nav-burger-top" />
<div className="nav-burger-bottom" />
</div>
</EasyFlexRow>
);
}
}
PARENT COMPONENT
class HomePage extends Component {
state = {
showMenu: false
};
toggleMenu = e => {
e.preventDefault();
console.log(this.state.showMenu);
this.state.showMenu = false
? this.setState({ showMenu: true })
: this.setState({ showMenu: false });
};
render() {
return (
<React.Fragment>
<GeneralNav toggleMenu={this.toggleMenu.bind(this)} />
</React.Fragment>
);
}
}