React中如何阻止模态框在外部触发onMouseUp时关闭？

修改后的代码实现 #

import { useState, useRef } from 'react';

function App() {
  const [modalState, setModalState] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const modal = useRef();
  
  const closeModal = () => {
    // 仅在非拖拽状态下关闭模态框
    if (!isDragging) {
      setModalState(false);
    }
  };
  
  const openModal = () => setModalState(true);
  
  const startDrag = () => {
    setIsDragging(true);
  };
  
  const endDrag = () => {
    // 延迟更新状态，确保click事件触发时状态已同步
    setTimeout(() => setIsDragging(false), 0);
  };

  return (
    <div 
      className="modal-container" 
      onClick={closeModal}
      onMouseUp={endDrag}
    >
      {modalState ? (
        <div 
          className="modal" 
          onClick={(e) => e.stopPropagation()} 
          ref={modal}
          onMouseDown={startDrag}
        >
          <span className="close-button" onClick={closeModal}>
            <b>X</b>
          </span>
          {/* 示例可拖拽图片 */}
          <img 
            src="https://picsum.photos/200" 
            alt="可拖拽图片"
            style={{ cursor: 'move', marginTop: '20px' }}
          />
        </div>
      ) : (
        <button
          onClick={(e) => {
            e.stopPropagation();
            openModal();
          }}
        >
          Open Modal
        </button>
      )}
    </div>
  );
}

问题原因与解决逻辑 #

• 问题根源：当在模态框内触发mousedown并拖拽到外部区域执行mouseup时，modal-container的onClick事件会被触发。这是因为click事件的触发逻辑是绑定在包含mousedown和mouseup动作的最外层元素上，即使这两个动作发生在不同元素内，最终仍会触发容器的点击事件，导致模态框意外关闭。

• 解决思路：

  1. 添加isDragging状态跟踪拖拽状态：在模态框内按下鼠标时标记为拖拽中。
  2. 在容器的mouseup事件中结束拖拽状态：使用setTimeout延迟更新状态，确保click事件触发时，拖拽状态已完成更新。
  3. 拦截关闭逻辑：在closeModal函数中判断当前是否处于拖拽状态，若是则跳过关闭操作。

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