reactjs - 对话框打开时，material-ui 菜单未关闭

Question

我正在使用react+material-ui。我在 jsx 文件中创建了 dialog 组件，如下所示:

   export default class CartoviewAbout extends React.Component {
        constructor(props) {
            super(props);
            this.state = {open: false};
        }

        _handleOpen() {
            this.setState({open: true});
        };

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

        render() {
            const actions = [
                <FlatButton
                    label="Close"
                    primary={true}
                    keyboardFocused={true}
                    onTouchTap={this._handleClose.bind(this)}
                />,
            ];

            return (
                <div>
                    <MenuItem
                        onTouchTap={this._handleOpen.bind(this)}
                        primaryText="Show About Dialog"
                    />
                    <Dialog
                        title={title}
                        actions={actions}
                        modal={false}
                        open={this.state.open}
                        onRequestClose={this._handleClose.bind(this)}
                        autoScrollBodyContent={true}
                        contentClassName="dialog"
                        bodyClassName="dialog_body"
                    >
                        <div ><p>{abstract}</p>
                        </div>
                    </Dialog>
                </div>
            );
        }
    }

我在另一个文件的菜单中使用此组件，但然后我单击菜单项对话框打开但菜单未关闭:

export default class CartoviewAppBar extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
     const about = appConfig.showAbout ? React.createElement(CartoviewAbout) : "";
     const icon_menu = <IconMenu
            iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
            anchorOrigin={{horizontal: 'right', vertical: 'top'}}
            targetOrigin={{horizontal: 'right', vertical: 'top'}}
        >
            {about}
        </IconMenu>;
        return (
            <div>
                <AppBar
                    title={''}
                    showMenuIconButton={false}
                    iconElementRight={icon_menu}
                />
            </div>
        );
    }

图片:我希望在对话框打开时关闭菜单

Answer 1

您需要在 IconMenu 之外添加 Dialog 组件。 IconMenu 的 onRequestChange 事件在对话框关闭之前不会触发。