javascript - 材质 ui 对话框在按下 tab 键时自动关闭

Question

我有一个反应项目，正在使用material-ui v3。我有一个appBar，其中包含一个带有一些menuItems的菜单，单击menuItem后，我打开了一个包含表单的对话框，现在一切似乎都很好，直到我填写第一个输入框并按 Tab切换到另一个输入框，只要我按 tab 对话框自动关闭。以下是相关的代码片段。

header.js

<header>
            <AppBar>
                <Toolbar>
                    <Typography variant="title" color="inherit" className={classes.flex} component={Link} to='/'>
            {appName}
                    </Typography>
                    <Avatar className={classes.orangeAvatar}>
                        <Button
                            color="primary"
                            aria-owns={anchorEl ? 'simple-menu' : null}
                            aria-haspopup="true"
                            onClick={this.handleClick}
                        >
                            {user && user.username[0] || "-"}
                        </Button>
                    </Avatar>
                    <Menu
                        id="simple-menu"
                        anchorEl={anchorEl}
                        open={Boolean(anchorEl)}
                        onClose={this.handleClose}
                    >
                        <ChangePassword
                            {...this.props}
            >
                            {({ onClick }) => {
                                return (
                                    <MenuItem onClick={onClick}>
                                        Change password
                                        </MenuItem>
                                );
                            }}
                        </ChangePassword>
                        <MenuItem onClick={async e => {
                            this.handleClose(e);
                            await window.localStorage.clear();
                            client.resetStore();
                            window.location.href = "/";
                        }}
                        >
                            <InputIcon className={classes.icon} /> Logout
                            </MenuItem>
                    </Menu>
                </Toolbar>
            </AppBar>
        </header>

更改密码.js

class ChangePassword extends React.PureComponent {
state = {
    open: false,
};

handleClose = () => {
    this.setState({ open: false });
};

handleOpen = () => {
    this.setState({ open: true });
};

render() {
    const { open } = this.state;
    const {
        classes,
        history,            
        negativeHandler = e => this.handleClose(),
        positiveHandler = e => null,
        postMutation = e => null,
        children
    } = this.props;
    const title = "Change password",
        content = "Change password of this user.";
    return (
        <Mutation mutation={UPDATE_USER_PASSWORD}>
            {(mutate, { loading, error, data }) => {
                return (
                    <React.Fragment>
                        {children({ onClick: this.handleOpen })}                            
                        {
                            open ? (
                                <Dialog
                                    fullScreen={false}
                                    open={open}
                                    onClose={negativeHandler}
                                    aria-labelledby={title}
                                >
                                    <Form
                                        onSubmit={e => {
                                            positiveHandler(mutate, e)
                                                .then((data) => {
                                                    if (postMutation) {
                                                        postMutation(data);
                                                        this.handleClose(e);
                                                    }
                                                    else {
                                                        history.goBack()
                                                    }
                                                })
                                        }}
                                    >
                                        <DialogTitle id={title}>{title}</DialogTitle>
                                        <DialogContent>
                                            <DialogContentText>
                                                {content}
                                            </DialogContentText>
                                            {
                                                getFormJSX(defaults)
                                            }
                                        </DialogContent>
                                        <DialogActions>
                                            {
                                                loading ? <CircularProgress className={classes.progress} /> : null
                                            }
                                            <Button onClick={negativeHandler} color="primary">Cancel</Button>
                                            <Button size="large" type="submit" disabled={loading}>Confirm</Button>
                                        </DialogActions>
                                    </Form>
                                </Dialog>
                            ) : null

                        }

                    </React.Fragment>
                );
            }}
        </Mutation>
    );
}}

export default withStyles(styles)(ChangePassword);

getFormJSX (defaults)方法简单地根据默认对象生成动态表单，返回值只包含表单控件，不包含标签本身。除了在我的应用程序的其余部分中的常规表单上一切正常之外，其他对话框除外。仅当对话框位于 appBar 内的菜单内的 menuItem 内时，才会出现此问题。如果我能提供其他任何东西来支持我的问题，请告诉我。

标签： javascriptreactjsmaterial-ui