React Modal点击外部无法正常关闭问题排查

问题原因 #

你之前给包含打开按钮的顶层div添加了关闭事件，点击按钮时事件会向上冒泡到顶层div，导致setShowModal(!showModal)（打开）和setShowModal(false)（关闭）先后触发，模态框刚打开就立刻关闭，所以按钮看起来失效。

修复方案 #

不需要修改顶层div，针对模态框的背景层和内容区域做两处调整：

• 保留全屏遮罩层的关闭事件；
• 给模态框内容容器添加事件停止冒泡，避免点击模态框内部触发关闭逻辑。

修改后的代码 #

const [showModal, setShowModal] = useState(false);

<div className='flex justify-center md:justify-end md:mt-4 mt-12'>
  <button
    onClick={() => setShowModal(!showModal)}
    className='bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 border-red-700 rounded'
  >
    Delete account button
  </button>
  {showModal && (
    <>
      <div 
        className='justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none'
        onClick={(e) => e.stopPropagation()}
      >
        <div className='relative w-auto my-6 mx-auto max-w-3xl'>
          <div className=' bg-gray-600 rounded-lg shadow-2xl relative flex flex-col w-full bg-white outline-none focus:outline-none'>
            <div className='flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t'>
              <h3 className='text-3xl font-semibold text-red-500'>
                Delete account
              </h3>
            </div>
            <div className='relative p-6 flex-auto'>
              <p className='my-4 text-white text-lg leading-relaxed'>
                Are you sure...
              </p>
            </div>
            <div className='flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b'>
              <button
                className='text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
                type='button'
                onClick={() => setShowModal(!showModal)}
              >
                Cancel
              </button>
              <button
                className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
                type='button'
                onClick={() => handleSelfDelete(user._id)}
              >
                Confirm
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        className='w-full h-screen opacity-25 fixed inset-0 z-10 bg-black'
        onClick={() => setShowModal(false)}
      />
    </>
  )}
</div>

关键改动说明 #

• 给z-50层级的模态框容器添加onClick={(e) => e.stopPropagation()}，阻止点击内部时事件冒泡到遮罩层；
• 保留遮罩层的关闭事件，点击模态框外部时正常关闭；
• 移除顶层div的关闭事件，确保打开按钮能正常触发模态框显示。

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