Reactjs 使用react material ui关闭全屏对话框后OnClick侦听器不工作

当调用相关的“OnClose”函数时，全屏对话框关闭，我遇到了一个问题。对话框关闭，但我无法再次打开。 你知道为什么会这样吗？这感觉就像有一个不可见的对话框停留在画布上，防止事件被冒泡到按钮或类似的东西

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;

从“React”导入React；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Dialog”导入对话框；
导入“/FooterBar.css”；
从“@material ui/core/Slide”导入幻灯片；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/IconButton”导入图标按钮；
从“@material ui/icons/Close”导入CloseIcon；
类BarItem扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：props.title，
targetURL:props.targetURL，
dialogOpen:false
};
this.barItemClicked=this.barItemClicked.bind（this）；
this.handleClose=this.handleClose.bind（this）；
}
Baritem（）{
这是我的国家({
dialogOpen:对
});
}
handleClose（）{
这是我的国家({
dialogOpen:false
});
}
渲染（道具）{
常量转换=React.forwardRef（函数转换（props，ref）{
返回；
});
返回(
{this.state.title}
);
}
}
类FooterBar扩展了React.Component{
render（）{
返回(
);
}
}
导出默认页脚栏；

---

我希望页脚栏的按钮可以重新打开对话框，但这不会发生。

问题似乎出在

转换组件中，每次渲染时都会将其新实例传递给
对话框。尝试在
BarItem
类之外声明它

另外，根据您希望在模态中显示的内容，我发现最好将模态和处理程序放在
FooterBar
组件中。看看我从你的代码中创建的。也许它会给你一些想法

让我知道它是否有用。
在我的例子中，它在全局上下文中，在类声明之外声明
常量转换
。