Question

当您在Material-UI菜单中单击MenuItem时，是否有一种方法可以弹出Dialog组件？我有一个标题组件，返回以下JSX：

return (
<AppBar
  iconElementLeft={<a href='/'><Avatar src="/static/images/favicon.ico" style={{ marginTop:4 }} /></a>}
  title= {
          <div>
            {"Application"}
            {displaySearch?<div style={{display:'inline-block', marginLeft:20, width:500}}><Search location={location}/></div>:null}
            <div style={{float:'right'}}>
              {logoUri ? <img src={logoUri} style={{ height:40, verticalAlign:'middle',borderRadius:3,overflow:'hidden'}} /> : null}
            </div>
          </div>
  }
  iconElementRight={
      <IconMenu
        iconButtonElement={
          <IconButton><MoreVertIcon /></IconButton>
        }
        targetOrigin={{ horizontal: 'right', vertical: 'top' }}
        anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
        >
        {
          menuItems.map(
            menuItem => <MenuItem containerElement={<Link to={menuItem.uri} />} primaryText={menuItem.primaryText} key={menuItem.key} />)
        }
        <MenuItem href='#' primaryText={'about'} onTouchTap={()=>{}}  />
        <MenuItem href='/auth/logout' primaryText={'logout'}  />
      </IconMenu>
  }
  <Dialog ref="dialog" title="version 1.0" open={true}>
    Version: {version}
  </Dialog>
  />
)

我只是试图将'about'菜单项连接到弹出的对话框并显示我传递给页面的版本信息，但是一旦我在IconMenu中包含Dialog，如果你点击IconMenu，没有任何显示，我收到错误：

"Menu.js:222 Uncaught TypeError: Cannot set property 'opacity' of undefined".

如果我删除Dialog组件，我的MenuItem按预期工作。我不确定我是如何将MenuItem连接到Dialog的。是否可以在Material-UI中使用MenuItem触发Dialog组件？

Answer 1

您可以将对话框创建为菜单项：

import MenuDialog from './MenuDialog';

然后

<IconMenu
    ...
    <MenuDialog />
    ...
</IconMenu>

现在在一个单独的MenuDialog.js文件中，作为上面导入的组件

render(){
const actions = [<FlatButton 
    label="Close"
    primary={true} 
    onClick={this.handleClose} />
]
    return(
       <div> 
<MenuItem onClick={this.handleOpen}>Press for dialog </MenuItem>
<Dialog
    title={Dialog name}
    actions={actions}
    modal={false}
    open={this.state.open}
    onRequestClose={this.handleClose}> Dialog writing
</Dialog>
</div>
)
}

在MenuItem上显示对话框单击

1 个答案: