Блог

Мне нужна ваша помощь, потому что у меня в react SPA есть модал, который содержит iFrame (разрешен полноэкранный режим), и когда я нажимаю на полноэкранный режим, а затем закрываю (кнопкой x) модал, это вызывает перенаправление на родительскую страницу. Я попытался добавить слушателя в событие «выгрузка», но ничего не изменилось.

У вас есть какие-либо идеи о причинах такого поведения?

 class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };

    this.mediaRef = React.createRef();
  }

  componentDidMount() {
    this.mediaRef.current.addEventListener('unload', this.onCloseEvent);
  }

  onCloseEvent = (event) => {
     // it should cause the closing of the modal
     this.props.setSelectedMedia(null);
  }

  renderMedia = () => {
    if (this.props.selectedMedia.type.includes("image")) {
      return (
        <Img
          as={motion.img}
          src={this.props.selectedMedia.url}
          alt="Enlarged Pic"
          ref={this.mediaRef}
          initial={{ y: "-100vh" }}
          animate={{ y: "0" }}
        />
      );
    } else if (this.props.selectedMedia.type.includes("video")) {
      //<ModalVideo channel = "custom" url = { this.props.selectedMedia.url } />
      return (
        <Iframe2
          //width = "560"
          //height = "560"
          allow="fullscreen *; autoplay; encrypted-media"
          allowfullscreen="true"
          title="video"
          src={this.props.selectedMedia.url}
          ref={this.mediaRef}
        />
      );
    }
  };

  handleClick = e => {
    if (this.mediaRef amp;amp; !this.mediaRef.current.contains(e.target))
      this.props.setSelectedMedia(null);
  };

  render() {
    return (
      <ModalContainer
        as={motion.div}
        onClick={this.handleClick}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      >
        {this.renderMedia()}
      </ModalContainer>
    );
  }
}

export default Modal;
 

Большое вам спасибо за вашу помощь.