Javascript 如何在reactjs中返回到以前的状态？

我已经创建了一个边栏组件，并将其状态设置为false以隐藏块，直到用户单击hanmburger图标，然后显示状态。但是，当用户单击关闭“X”图标时，我尝试返回（或关闭侧边栏菜单）。我已经编写了一个hideMenu方法来将状态返回为false，但是它不起作用，并且没有错误。 这是我写的

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(){
   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={this.hideMenu} 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

class subminnavbar扩展了React.Component{
构造函数（）{
超级（）；
this.state={isShown:false}
this.showMenu=this.showMenu.bind（this）
this.hideMenu=this.hideMenu.bind（this）
}
showMenu（）{
this.setState（{isShown:true}）
}
希德梅努（）{
this.setState（{isShown:false}）
}
render（）{
返回(

女人
男人
健康与美容

X
{/*  */}





);
}
};
导出默认子MinnavBar

您没有正确关闭

标签。按照以下说明更新您的代码：

  <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" /></span>
      <div className="mobile-menu-display" id="mySidebar" style={{display: this.state.isShown ? 'block' : 'none' }}>
        <span onClick={this.hideMenu} className="float-right font-weight-bold hide-big close">X</span>
      </div>
      </div>


    <div className="co">
...



女人
男人
健康与美容

X
...
真的很奇怪，但是你能试着模仿我在这个代码沙盒中所做的吗？

这应该很简单
您单击以隐藏菜单的范围位于范围内，从而触发showMenu功能。在设置状态之前，需要使用事件参数调用hideMenu函数，并在hideMenu函数中使用stopPropagation函数。因此，外部跨距的点击不会触发，只有内部跨距会收到点击

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

您需要确保事件不会再次传递到外部容器。
在您的情况下，事件由内部元素触发，导致隐藏，但随后事件传播到外部容器，导致调用showMenu

有关的其他阅读资料可在此处找到：

似乎Padi Dev也发现了我面前的问题：）
。。。问题是…？那有什么问题？你有什么错误吗？@AndrzejZiółek它实际上不起作用。@Lelouch没有错误。我已经编写了hideMenu来将状态设置回false，但是它仍然不起作用。您可以尝试在hideMenu中放置一些日志，并检查它是否在单击时被调用吗？
  this.state = { isShown: false }


  showMenu = () => {
    this.setState({isShown: true})
  }

  hideMenu = event => {
   event.stopPropagation()
   this.setState({isShown: false})
  }