React.js侧边栏关闭功能失效：如何恢复至初始状态？

我一眼就看出问题所在了——事件冒泡在搞鬼！你的关闭按钮(<span onClick={this.hideMenu}>)是嵌套在触发显示菜单的汉堡图标<span onClick={this.showMenu}>里面的。当你点击关闭按钮时，点击事件会向上冒泡到父元素，触发showMenu方法，刚把isShown设为false，又立刻被设回true，所以看起来关闭按钮完全没反应，而且不会有报错（因为逻辑本身没语法错误，只是事件流的问题）。

下面给你两种可行的修复方案：

方案一：在关闭按钮的事件处理函数中阻止冒泡 #

修改hideMenu方法，添加event.stopPropagation()来阻止事件向上传递：

hideMenu(event){
  event.stopPropagation(); // 阻止事件冒泡到父元素
  this.setState({isShown: false})
}

这样点击关闭按钮时，只会触发hideMenu，不会触发父元素的showMenu，侧边栏就能正常关闭了。

方案二：调整DOM结构，把侧边栏移出汉堡图标容器 #

把mobile-menu-display这个div从汉堡图标的<span>里移出来，避免嵌套导致的事件冒泡问题。修改后的render部分代码如下：

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" />
        </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">
        <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>
  );
}

这种方案从结构上避免了事件冒泡的触发场景，也是很常用的处理方式。

两种方案都能解决你的问题，选哪个取决于你的布局需求。如果侧边栏需要和汉堡图标有嵌套的样式关联，方案一更合适；如果布局允许拆分，方案二更清晰。

内容的提问来源于stack exchange，提问作者Iamlimo