在 MenuItem 单击时显示对话框答案

【问题标题】：Show Dialog on MenuItem click在 MenuItem 单击时显示对话框
【发布时间】：2017-02-20 12:02:36
【问题描述】：

当您单击 Material-UI 菜单中的 MenuItem 时，是否有办法弹出对话框组件？我有一个返回以下 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>
  />
)

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

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

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

【问题讨论】：

material-ui 文档中有</DialogExampleSimple>。把它放到像这样的菜单项</MenuItem chidren={</DialogExampleSimple>}
很难阅读您的示例代码，我认为您的 Dialog 在您的示例中位于错误的位置（作为 AppBar 道具？）。基本上，您应该使用 MenuItem Click 来控制对话框的可见性。当有人点击关于将this.state.open 更改为true。你应该在渲染对话框组件中的某个地方使用这个this.state.open，并且你不应该将对话框组件保留在 IconMenu 中

标签： reactjs material-ui

【解决方案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>
)
}

【讨论】：