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

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

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

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组件在某些情况下不会动态扩展以允许更多内容。我不确定它是否会剪切子菜单。

Answer 3

以防万一有人从Google撞到这里，这是sandbox

DropDownMenu带有子菜单

3 个答案: