Reactjs 使用React js获取引导4中导航栏的状态

我试图根据导航栏是打开还是关闭（在手机和平板电脑视图中）来切换一些样式，我已经看到了jQuery的解决方案，但我想在react js中实现

我曾尝试在“汉堡”按钮上设置一个状态，并在用户交互时切换它，但这并不是一个好的解决方案，它存在缺陷，因为有时用户可以在不单击“汉堡”按钮的情况下关闭导航栏，而我想获得导航栏的实际状态

这在react js中可能吗？如果是，怎么做

---

使用布尔状态变量，并在单击汉堡时将其切换

...
constructor(props) {
    super(props);
    this.state = { showNav: true };
    this.toggleNav = this.toggleNav.bind(this);
}

toggleNav() {
    this.setState({ 
        showNav: !this.state.showNav
    })
}

在导航栏标记中

<nav>
   <button className="navbar-toggler" type="button" onClick={this.toggleNav}>
       <span className="navbar-toggler-icon"></span>
   </button>
   <div className={(showNav ? 'show' : '') + ' collapse navbar-collapse'}>
   </div>
</nav>

---

演示：

是的，这是可能的。我想看一个指南或解决方案@Keikai我想看看你尝试的代码这正是我迄今为止所尝试的，但我一直在以错误的方式做一些事情，你的是真的，谢谢创建，请确保你发布你在问题中尝试的代码