2016-02-02 191 views
1

我想創建一個帶有嵌套子菜單的下拉菜單,這可能嗎?我至今是:DropDownMenu與子菜單

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嘗試過,但是當點擊子菜單時,它剛剛消失(可能是點擊下拉菜單項來作出反應)

回答

0

如果你感到危險的,你其實可以做這項工作通過在DropDownMenu的行上創建您自己的組件來實現。如果你看看它,它會使用Popover來託管菜單。爲什麼子菜單的不工作的原因是因爲它增加了代碼隱藏任何菜單項的點擊彈出了 -

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

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

DropDownMenu material-ui GitHub page來源。

如果項目有子項,您可以更改此邏輯以不更改打開狀態。

您可能會遇到另一個我遇到的挑戰,Popover組件不會動態擴展以允許在某些情況下允許更多內容。我不確定它是否會剪輯子菜單。

0

目前(v0.14.4)你無法使用DropDownMenu ..

您將能夠實現,使用Menu組件,但我不認爲你需要一個內嵌菜單,所以答案是no, you can't accomplish that today.