Слушатели OnClick не работают после закрытия полноэкранного диалога с помощьюа- - PullRequest
Новая
       4

Слушатели OnClick не работают после закрытия полноэкранного диалога с помощьюа-

0 голосов
/ 12 июня 2019

У меня проблема с полноэкранным диалоговым окном, которое закрывается при вызове связанной функции "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;

Я ожидаю, что кнопки панели нижнего колонтитула снова откроют диалоговое окно, ноэтого не происходит.

1 Ответ

0 голосов
/ 12 июня 2019

Похоже, что проблема заключается в вашем TransitionComponent, вы передаете новый экземпляр этого в ваш Dialog каждый раз, когда вы делаете рендеринг. Попробуйте объявить это за пределами вашего BarItem класса.

Кроме того, в зависимости от того, что вы хотите отобразить в вашем модале, я бы посоветовал поместить модал и обработчик в ваш компонент FooterBar. Взгляните на эту песочницу , которую я создал из вашего кода. Может быть, это даст вам некоторые идеи.

Дайте мне знать, если это поможет.

...