带有子菜单的 DropDownMenu答案

【问题标题】：DropDownMenu with sub-menus带有子菜单的 DropDownMenu
【发布时间】：2016-05-11 11:18:26
【问题描述】：

我正在尝试创建一个带有嵌套子菜单的下拉菜单，这可能吗？到目前为止我所拥有的是：

const action2 = <DropDownMenu value={this.state.action2} onChange={this.handleChange} key={2} desktop={true}>
  <MenuItem key={1} value="1" primaryText="Refresh"/>
  <MenuItem key={2} value="2" primaryText="Send feedback"/>
  <MenuItem key={3} value="3" primaryText="Settings"/>
  <MenuItem key={4} value="4" primaryText="Help"/>
  <MenuItem key={5} value="5" primaryText="Sign out"/>
  <Divider />
  <MenuItem key={6} primaryText="Dropdown" rightIcon={<ArrowDropRight />} menuItems={[
      <MenuItem key={1} value="6" primaryText="Refresh"/>,
      <MenuItem key={2} value="7" primaryText="Send feedback"/>,
      <MenuItem key={3} value="8" primaryText="Settings"/>,
      <MenuItem key={4} value="9" primaryText="Help"/>,
      <MenuItem key={5} value="10" primaryText="Sign out"/>
    ]}/>
</DropDownMenu>;

这会呈现带有菜单项的下拉菜单，只是“下拉”菜单项不会在点击时呈现子菜单。

有没有办法使用下拉菜单完成此操作？我也尝试过使用 IconMenu，但是当单击时呈现子菜单时，它就消失了（可能是对点击下拉菜单项做出反应）

【问题讨论】：

标签： material-ui

【解决方案1】：

如果您感到危险，您实际上可以通过在 DropDownMenu 行上创建自己的组件来完成这项工作。如果您查看它的内部，它会使用 Popover 来托管菜单。子菜单不起作用的原因是它添加了代码来隐藏任何菜单项单击的弹出窗口-

_onMenuItemTouchTap(key, payload, e) {
 this.props.onChange(e, key, payload);

    this.setState({
      open: false,
    });
},

来自DropDownMenu material-ui GitHub page。

如果项目有子项，您可以更改此逻辑以不更改打开状态。

您可能会遇到我遇到的另一个挑战，Popover 组件在某些情况下不会动态扩展以允许更多内容。我不确定它是否会剪切子菜单。

【讨论】：

【解决方案2】：

目前（v0.14.4）你不能使用DropDownMenu..

您可以使用Menucomponent 来实现，但我认为您不需要内联菜单，所以答案是no, you can't accomplish that today.

【讨论】：