使用react-material-ui关闭全屏对话框后,OnClick侦听器不起作用

Flowinho

我遇到全屏对话框的问题,该对话框在调用关联的“ 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;

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

阿克塞尔·朱尼斯

看来问题出在您的TransitionComponent,您在Dialog每次渲染时都将其新实例传递给您尝试在BarItem课程之外声明它

另外,根据要在模式中显示的内容,我会发现最好将模式和处理程序放入FooterBar组件中。看看我根据您的代码创建的此沙箱也许会给你一些想法。

让我知道是否有帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用浏览器后退按钮关闭多个嵌套的Material UI对话框-reactjs

我想在 React 中的 material-ui 中创建一个宽对话框窗口,但 fullwidth 参数不起作用

React JS material-ui项目列表对话框未关闭

在React material-ui上显示对话框

使用Angular Material,可以关闭特定对话框

如何在Material-UI对话框模态中使用react-infinite-scroll-component?

如何在React的Material-UI中关闭另一个组件中的对话框?

仅使用Material UI React Components的CSS

在React Material UI表中使用按钮

React - 使用网格的 Material-UI 卡片

React Material UI 按鈕組件不起作用

AutoComplete Material-ui React getOptionSelected道具不起作用

React + Material UI +打字稿+ Webpack + SSR不起作用

React Material-UI注入withStyles不起作用

React Material-UI下拉菜单不起作用

React Material UI TextField FormHelperTextProps样式不起作用

React Material UI TextField样式不起作用

React Material-UI 模态宽度不起作用

React material-ui 多個複選框和 onChange 不起作用

与Radium和Material-UI一起使用时,React悬停样式不起作用

React Hooks和Material-UI:在使用中的首次加载时无法获取对话框引用

Material UI 和 React &hover 选择器不起作用

Bootstrap与Material UI for React?

React Material UI网格

React Material UI onFocusOut

React Material UI 滑块

自定义容器上的Material UI React Modal对话框

渲染日历而无需打开Material-UI React的对话框/模态

如何从 React 对话框中的 material-ui TextFileds 获取值?