ReactJS+Gatsby模态框ESC按键无法触发关闭函数问题咨询

嘿，咱们来搞定这个ESC按键触发不了模态框关闭的问题！这种情况一般是事件绑定时机不对、状态传递有问题，或者闭包引用过期导致的，我结合你提到的三个文件给你梳理解决方案：

第一步：检查Modal组件的键盘事件监听逻辑 #

首先确保modal.js里正确绑定了keydown事件，并且只在模态框打开时监听，卸载时移除（避免内存泄漏），同时要保证调用的onClose是最新的函数引用：

import React, { useEffect } from 'react';

const Modal = ({ isOpen, onClose, projectDetails }) => {
  useEffect(() => {
    const handleKeyDown = (e) => {
      // 只有模态框打开时才响应ESC
      if (e.key === 'Escape' && isOpen) {
        console.log('ESC按键已触发'); // 先打印确认事件能捕获到
        onClose();
      }
    };

    // 模态框打开时添加全局监听
    if (isOpen) {
      window.addEventListener('keydown', handleKeyDown);
    }

    // 清理函数：组件卸载或isOpen变化时移除监听
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, onClose]); // 必须把isOpen和onClose加入依赖，避免闭包引用旧值

  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      {/* 阻止内容区域的点击冒泡到遮罩层 */}
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>{projectDetails?.title}</h2>
        <button onClick={onClose}>关闭模态框</button>
        {/* 其他项目详情内容 */}
      </div>
    </div>
  );
};

export default Modal;

第二步：确保Project组件正确传递打开事件 #

project.js作为触发模态框的入口，只要能正确调用父组件的打开函数就行，这里逻辑比较简单：

import React from 'react';

const Project = ({ project, onOpenModal }) => {
  return (
    <div className="project-thumbnail" onClick={() => onOpenModal(project)}>
      <img src={project.thumbnail} alt={project.title} />
      <h3>{project.title}</h3>
    </div>
  );
};

export default Project;

第三步：确认Projects页面的状态管理正确 #

projects.js是状态的源头，要保证handleCloseModal能正确更新模态框的状态，并且传递给Modal组件的onClose是这个函数的引用：

import React, { useState } from 'react';
import Project from './project';
import Modal from './modal';
import projectsData from '../data/projects'; // 假设你的项目数据在这里

const ProjectsPage = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedProject, setSelectedProject] = useState(null);

  const handleOpenModal = (project) => {
    setSelectedProject(project);
    setIsModalOpen(true);
    // 可选：打开模态框后让内容区域聚焦，提升键盘事件可靠性
    setTimeout(() => {
      document.querySelector('.modal-content')?.focus();
    }, 100);
  };

  const handleCloseModal = () => {
    console.log('关闭函数已调用'); // 打印确认这个函数能被触发
    setIsModalOpen(false);
    setSelectedProject(null);
  };

  return (
    <div className="projects-page">
      <h1>我的作品集</h1>
      <div className="projects-grid">
        {projectsData.map(project => (
          <Project 
            key={project.id} 
            project={project} 
            onOpenModal={handleOpenModal} 
          />
        ))}
      </div>
      <Modal 
        isOpen={isModalOpen} 
        onClose={handleCloseModal} 
        projectDetails={selectedProject} 
      />
    </div>
  );
};

export default ProjectsPage;

排查小技巧 #

如果还是没解决，试试这几点：

• 打开浏览器控制台，看ESC按下时有没有打印ESC按键已触发，如果没有说明事件没被捕获；如果有但没打印关闭函数已调用，说明onClose引用有问题
• 检查useEffect的依赖数组，有没有漏掉isOpen或onClose，这是最常见的闭包坑
• 看看页面上有没有其他组件绑定了keydown事件，会不会调用了e.preventDefault()阻止了ESC的默认行为
• 确认模态框打开时，isOpen状态确实是true

内容的提问来源于stack exchange，提问作者user7388854