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

Question

正在尝试编写一个函数来关闭模态图像。函数根本没有执行，因此没有结果。使用 React 生命周期在事件上添加和删除事件侦听器。知道这里发生了什么样的问题吗？已附上代码，请检查我哪里做错了。

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>
    );
  }
}

Answer 1

Function is not executing at all, so that, there is no result.

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 将 return 未定义。这个属性不存在。只需检查 event.key

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

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

Modal image is not closing (react) - JavaScript Event Not Working

javascript

events

modal-dialog

reactjs