OnClick Listeners not working after closing full-screen dialog using react-material-ui

问题

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.

回答1:

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.

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.

Let me know if it helps.

来源：https://stackoverflow.com/questions/56561139/onclick-listeners-not-working-after-closing-full-screen-dialog-using-react-mater

标签

reactjs

material-ui