时间戳

首页 > 解决方案 > 模态图像未关闭（反应） - JavaScript 事件不工作

javascript - 模态图像未关闭（反应） - JavaScript 事件不工作

问题描述

试图编写一个函数来关闭模态图像。函数根本没有执行，所以没有结果。使用反应生命周期来添加和删除事件的事件监听器。任何想法在这里发生了什么样的问题？附上代码，请检查我在哪里做错了。

import React, { Component } from "react";
import ImageGalleryItem from "../ImageGalleryItem/ImageGalleryItem";
import PropTypes from "prop-types";
import Modal from "../Modal/Modal";

export default class ImageGallery extends Component {
  state = {
    open: false,
    largeImageURL: "",
  };

  setLargeImg = (e) => {
    this.setState({ largeImageURL: e });
  };

  render() {
    let imageListContent;
    const { images } = this.props;
    return (
      <>
        <ul className="ImageGallery">
          {images
            ? (imageListContent = images.map((image) => (
                <ImageGalleryItem
                  image={image.webformatURL}
                  title={image.title}
                  largePic={image.largeImageURL}
                  setLargeImg={this.setLargeImg}
                  key={image.id}
                />
              )))
            : (imageListContent = null)}
        </ul>
        {this.state.largeImageURL && (
          <Modal
            largeImageURL={this.state.largeImageURL}
            state={this.state}
            setLargeImg={this.setLargeImg}
          />
        )}
      </>
    );
  }
}

模态组件

import React, { Component } from "react";

export default class Modal extends Component {
  escFunction = (event) => {
    if (event.target.code === "Escape") {
      this.props.setLargeImg(null);
    }
  };
  componentDidMount() {
    window.addEventListener("keyDown", this.escFunction);
  }
  componentWillUnmount() {
    window.removeEventListener("keyDown", this.escFunction);
  }

  render() {
    return (
      <div className="Overlay">
        <div className="Modal">
          <img src={this.props.largeImageURL} alt="" />
        </div>
      </div>
    );
  }
}

标签： javascriptreactjseventsmodal-dialog

解决方案

函数根本没有执行，所以没有结果。

DOM 事件是键敏感的。keyDown事件不存在。然而，keydown确实如此。简单地从小d到大D

componentDidMount() {
  window.addEventListener("keydown", this.escFunction);
}
componentWillUnmount() {
  window.removeEventListener("keydown", this.escFunction);
}

参考：https ://developer.mozilla.org/en-US/docs/Web/Events


最后，event.target.code将返回未定义。该属性不存在。只需检查event.key

escFunction = (event) => {
    if (event.key === "Escape") {
        this.props.setLargeImg(null);
    }
};

推荐阅读