React+Tailwind模态框关闭按钮点击无响应问题求助

问题原因 #

1. 事件冒泡冲突：点击关闭按钮或右上角×时，事件会向上冒泡到绑定了openModal的父容器，触发setModalOpen(true)，直接抵消了关闭操作的setModalOpen(false)。
2. JSX语法错误：代码存在多余的闭合标签，不符合React单根元素的渲染要求，可能导致DOM结构异常。

解决方法 #

1. 阻止事件冒泡 #

在关闭函数中添加event.stopPropagation()，避免事件传递到父容器，抵消关闭操作。

2. 修正JSX结构 #

确保组件返回的JSX只有一个根元素，移除多余的标签，保证渲染结构正常。

3. 优化模态框定位 #

给模态框的内容容器添加relative类，让右上角的关闭图标定位正确（原代码中absolute缺少相对定位父元素，会导致图标位置偏移）。

修正后的完整代码 #

import { useState } from 'react';

const YourComponent = () => {
  const [modalOpen, setModalOpen] = useState(false);
  
  const openModal = () => {
    setModalOpen(true);
  };

  const closeModal = (e) => {
    e.stopPropagation();
    setModalOpen(false);
  };

  return (
    <div className='bg-slate-300 dark:bg-slate-800 rounded-lg overflow-hidden' onClick={openModal}>
      {/* 添加触发模态框的内容，比如卡片或按钮 */}
      <p className='p-4'>点击打开模态框</p>

      {modalOpen && (
        <div className='fixed inset-0 bg-slate-300 dark:bg-slate-900 bg-opacity-50 backdrop-blur flex justify-center items-center'>
          <div className='dark:bg-slate-700 p-4 rounded relative'>
            <span 
              className='absolute top-0 right-0 m-2 text-red-600 text-lg cursor-pointer' 
              onClick={closeModal}
            >
              &times;
            </span>

            {/* 这里可以添加模态框的自定义内容 */}
            <div className='mt-6'>
              模态框内容区域
            </div>

            <button 
              onClick={closeModal} 
              className="mt-4 bg-gray-300 hover:bg-gray-400 px-3 py-1 rounded"
            >
              Close Modal
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default YourComponent;

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