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事件在对话框关闭之前不会触发。

Answer 2

尝试这可能是一种解决方法。

 _handleOpen() {
    window.setTimeout(() => {
       this.setState({open: true});
    }, 100); //any arbitary timeout
 };

MenuItem onClick将自动触发关闭IconMenu

我认为打开Dialog会阻止关闭IconMenu的事件。因此，在使用Dialog

关闭IconMenu后打开setTimeout

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

2 个答案: