我在调用关联的“ OnClose”功能时关闭全屏对话框时遇到问题。对话框关闭,但是我无法再次打开。 知道为什么会这样吗?感觉好像在canvans上有一个不可见的对话框,阻止事件冒泡到按钮或类似的东西上。
import React from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import "./FooterBar.css";
import Slide from "@material-ui/core/Slide";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
class BarItem extends React.Component {
constructor(props) {
super(props);
this.state = {
title: props.title,
targetURL: props.targetURL,
dialogOpen: false
};
this.barItemClicked = this.barItemClicked.bind(this);
this.handleClose = this.handleClose.bind(this);
}
barItemClicked() {
this.setState({
dialogOpen: true
});
}
handleClose() {
this.setState({
dialogOpen: false
});
}
render(props) {
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
return (
<div>
<Button onClick={this.barItemClicked}>{this.state.title}</Button>
<Dialog
fullScreen
open={this.state.dialogOpen}
onClose={this.handleClose}
TransitionComponent={Transition}
>
<AppBar>
<Toolbar>
<IconButton
edge="start"
color="inherit"
onClick={this.handleClose}
aria-label="Close"
>
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
</Dialog>
</div>
);
}
}
class FooterBar extends React.Component {
render() {
return (
<div class="footerbar">
<BarItem title="Impressum" targetURL="a" />
<BarItem title="Datenschutzerklärung" targetURL="b" />
<BarItem title="Kontakt" targetURL="c" />
</div>
);
}
}
export default FooterBar;
我希望页脚栏上的按钮可以重新打开对话框,但这不会发生。
答案 0 :(得分:0)
问题似乎出在您的TransitionComponent
上,您每次渲染时都会将其新实例传递给Dialog
。尝试在您的BarItem
类之外声明它。
此外,根据要在模式中显示的内容,我发现最好将模式和处理程序放入FooterBar
组件中。看看我从您的代码创建的this sandbox。也许会给你一些想法。
让我知道是否有帮助。