带有子菜单的 DropDownMenu

Question

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

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>;

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

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

Answer 1

目前 (v0.14.4) 您无法使用 DropDownMenu..

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

Answer 2

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

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

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

来源于DropDownMenu material-ui GitHub page.

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

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

带有子菜单的 DropDownMenu

DropDownMenu with sub-menus

material-ui