Reactjs 如何使用PanelGroup制作react引导下拉列表

我正在尝试做一个下拉列表，每个菜单项都有子菜单项 作为

我使用react引导下拉菜单来实现这一点 其中，每个菜单项都有一组项目，如

Litem-1

和

Litem-2

因此，当我单击“选择”时，下拉列表应打开，但当我单击单个标题（默认情况下未展开）时，下拉列表应展开且不应关闭，当单击“子标题”时，下拉列表必须关闭 我曾尝试使用下拉菜单的打开选项，使用该选项，我试图控制下拉菜单的可见性，我可以为标题实现相同的可见性，当我尝试执行相同的操作时，我无法实现，因为事件不断冒泡，直到父项和下拉菜单保持打开，我也尝试过使用

stopPropagation

，但看起来menuitem不尊重它，不知道为什么会这样

我试着这样解决这个问题 是否有人可以评论一下这种方法是否正确，以及为什么我不能在这里使用

event.stopPropagation

和prevent default

---

感谢

以您希望的方式使用面板，您必须将面板上的

手风琴

道具设置为true。查看下面的代码：

<Dropdown.Menu className="Groups" bsRole="menu">
          <MenuItem  onClick={this.menuItemClickedThatShouldntCloseDropdown.bind(this)}>
           <PanelGroup activeKey="1" accordion activeKey={this.state.activeKey}>
             <Panel header="header1" eventKey='1'>
               <span onClick={this.menuItemShouldCloseDropDown.bind(this)}>Content-1</span>
             </Panel>
              <Panel header="header2" eventKey='2'>
                <span onClick={this.menuItemShouldCloseDropDown.bind(this)}>content=2</span>
             </Panel>
            </PanelGroup>
        </MenuItem>
           <MenuItem  onClick={this.menuItemClickedThatShouldntCloseDropdown}>
            hi
        </MenuItem>
      </Dropdown.Menu>

  </Dropdown>

---

这似乎至少解决了你的一个问题。我建议删除另一个伪状态

this.\u forceOpen

逻辑，看看您真正需要什么

只是想澄清一下，您需要

submit

和

v

按钮打开标题列表，然后您需要单击标题以显示默认隐藏的副标题？是的，这正是我要查找的，当您单击副标题时，它应该关闭？是的，我的想法是，当你点击子标题时，它必须关闭，并且在关闭后，子标题上选择/点击的名称必须出现在顶部。我已经考虑过我从react bootstrap这张票中的方法很酷。我的意思是，如果它有效且容易，那么请将它保留在你投入的所有时间内

<Dropdown.Menu className="Groups" bsRole="menu">
          <MenuItem  onClick={this.menuItemClickedThatShouldntCloseDropdown.bind(this)}>
           <PanelGroup activeKey="1" accordion activeKey={this.state.activeKey}>
             <Panel header="header1" eventKey='1'>
               <span onClick={this.menuItemShouldCloseDropDown.bind(this)}>Content-1</span>
             </Panel>
              <Panel header="header2" eventKey='2'>
                <span onClick={this.menuItemShouldCloseDropDown.bind(this)}>content=2</span>
             </Panel>
            </PanelGroup>
        </MenuItem>
           <MenuItem  onClick={this.menuItemClickedThatShouldntCloseDropdown}>
            hi
        </MenuItem>
      </Dropdown.Menu>

  </Dropdown>

  handleSelect(activeKey) {
    this.setState({ activeKey })
  }