Question

我正在尝试制作一个下拉菜单，其中每个菜单项都有子菜单如

Drodown(select)
 1. List item(header)
      Litem-1(subheader)
      Litem-2(subheader)
 2. Header-2(header)
       Litem-2-1(subheader)
       Litem-2-2(subheader)

我正在使用react bootstrap下拉来实现这一目标其中每个menuitem都有一个面板组项目Litem-1和Litem-2

所以当我点击选择时，下拉列表应该打开，但是当我点击各个标题（默认情况下没有展开）时，应该展开并且不应该关闭下拉列表，当点击子标题下拉列表时必须关闭我已经尝试使用打开选项下拉列表，使用此我试图控制下拉列表的可见性我可以实现相同的标题当我尝试做同样我无法实现因为事件是冒泡直到父母和下拉列表仍然打开，我也尝试使用stopPropagation但看起来像menuitem不尊重它不确定为什么会是这种情况

我试图解决这个问题 https://codepen.io/anon/pen/WONMGd 如果这种方法是正确的，那么请一些人评论一下，为什么我不能使用event.stopPropagation并阻止默认

由于

Answer 1

要按照您想要的方式使用面板，您必须将面板上的accordion道具设置为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>

并将其添加到您的类定义中：

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

这似乎解决了至少一个问题。我建议撕掉其他伪状态this._forceOpen逻辑来查看你真正需要的东西。

如何使用panelgroups

1 个答案: