ReactJS中点击模态框内文件按钮时模态框意外消失的解决方法

问题根源是点击内部“browse”按钮时，事件会冒泡到外层的modal-overlay容器，触发了关闭判断逻辑。只需修改以下两处即可解决：

1. 阻止Dialog内部事件冒泡 #

在DialogModal组件的<dialog>元素上添加点击事件，阻止事件向上冒泡到overlay：

<dialog className="modal-dialog" ref={ref} onCancel={onClose} onClick={(e) => e.stopPropagation()}>
  {children}
</dialog>

2. 简化overlay的关闭逻辑（更可靠） #

替换原来的坐标判断逻辑，直接判断点击目标是否为overlay自身，避免坐标计算可能出现的误差：

<div
  className="modal-overlay"
  onClick={(e) => {
    // 仅点击遮罩层本身时触发关闭
    if (e.target === e.currentTarget) {
      onClose();
    }
  }}
>

修改后的完整DialogModal组件代码 #

const DialogModal = ({ isOpened, onClose, children }: Props) => {
    const ref = useRef<HTMLDialogElement>(null);

    useEffect(() => {
        if (isOpened) {
            ref.current?.showModal();
            document.body.classList.add("modal-open"); // 阻止背景滚动
        } else {
            ref.current?.close();
            document.body.classList.remove("modal-open");
        }
    }, [isOpened]);

    return (
        <div
            className="modal-overlay"
            onClick={(e) => {
                if (e.target === e.currentTarget) {
                    onClose();
                }
            }}
        >
            <dialog className="modal-dialog" ref={ref} onCancel={onClose} onClick={(e) => e.stopPropagation()}>
                {children}
            </dialog>
        </div>
    );
};

修改后，只有点击模态框的外部遮罩层时才会关闭模态框，点击内部任何元素（包括触发隐藏file input的“browse”按钮）都不会触发关闭逻辑。

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