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

问题描述

我遇到全屏对话框的问题，该对话框在调用关联的"OnClose"功能时被关闭.对话框关闭，但是我无法再次打开.知道为什么会这样吗?感觉好像在canvans上有一个不可见的对话框，可以防止事件冒泡到按钮或类似的东西上.

I have a problem with a fullscreen dialog that is being closed when the associated "OnClose" function is called. The dialog closes, however i cannot be opened again.Any idea on why this happens? It feels like there is an invisible dialog staying on the canvans that prevents event from being bubbled to the button, or something similar.

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;

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

I expect the buttons of the Footerbar to re-open the dialog, but this does not happen.

推荐答案

问题似乎出在您的 TransitionComponent 上，您正在将其新实例传递给 Dialog 每次渲染.尝试在 BarItem 类之外声明它.

It looks like the problem lies in your TransitionComponent, you're passing a new instance of it to your Dialog each time you render. Try declaring it outside of your BarItem class.

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

Also, depending on what you want to display in your modal, I would find it better to put the modal and handler in your FooterBar component. Take a look at this sandbox that I created from your code. Maybe it'll give you some ideas.

让我知道是否有帮助.

这篇关于使用react-material-ui关闭全屏对话框后，OnClick侦听器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！