ReactBootstrap：Popover触发Modal后表单提交与文件选择问题解决

问题根源 #

1. Modal被嵌套在Popover的DOM结构中，导致Modal内的点击事件会冒泡到Popover，触发OverlayTrigger的rootClose逻辑，你之前添加的全局事件阻止破坏了文件输入和表单的默认行为。
2. 表单提交时未阻止默认跳转行为，导致页面刷新。

修复步骤 #

1. 将Modal移出Popover组件 #

Modal是全局层级的组件，不应嵌套在Popover内部，这样能避免事件冒泡冲突：

修改PopoverMenu组件，移除内部的EditSong：

const PopoverMenu = React.forwardRef((props, ref) => {
    return (
        <Popover id="popover-basic" {...props} ref={ref}>
            <Popover.Body className="pt-2 ps-2 pb-2 pe-2">
                <ListGroup variant="flush">
                    <ListGroup.Item action>Delete</ListGroup.Item>
                    <ListGroup.Item
                        action
                        onClick={() => setShowEditModal(true)}
                    >
                        Edit
                    </ListGroup.Item>
                </ListGroup>
            </Popover.Body>
        </Popover>
    );
});

在组件渲染时，将EditSong与OverlayTrigger同级放置：

<>
    <OverlayTrigger
        trigger="click"
        rootClose
        placement="bottom"
        overlay={<PopoverMenu />}
    >
        <i
            className="fa-solid fa-ellipsis"
            style={{ fontSize: "1.5em", cursor: "pointer" }}
        ></i>
    </OverlayTrigger>
    <EditSong
        show={showEditModal}
        setShow={setShowEditModal}
    />
</>

2. 阻止表单的默认提交行为 #

在EditSong组件的表单中，通过onSubmit事件阻止页面跳转：

// EditSong组件内的表单代码
<form onSubmit={(e) => {
    e.preventDefault(); // 阻止默认刷新行为
    // 执行你的表单提交逻辑，比如API请求、状态更新等
}}>
    {/* 文件输入框及其他表单元素 */}
    <input type="file" name="songFile" />
    <button type="submit">提交修改</button>
</form>

3. 优化体验：点击Edit时自动关闭Popover #

添加ref控制OverlayTrigger，点击Edit选项时自动关闭Popover：

// 定义ref
const overlayTriggerRef = useRef(null);

// 修改Edit选项的onClick
<ListGroup.Item
    action
    onClick={() => {
        setShowEditModal(true);
        overlayTriggerRef.current?.hide(); // 关闭Popover
    }}
>
    Edit
</ListGroup.Item>

// 给OverlayTrigger绑定ref
<OverlayTrigger
    ref={overlayTriggerRef}
    trigger="click"
    rootClose
    placement="bottom"
    overlay={<PopoverMenu />}
>
    {/* 触发元素 */}
</OverlayTrigger>

效果说明 #

• 移除Popover上的全局事件阻止后，文件输入框可正常点击选择文件。
• 表单提交时通过e.preventDefault()阻止默认跳转，页面不再刷新，可正常处理提交逻辑。
• Modal不在Popover的DOM树中，点击Modal内部不会触发Popover的关闭逻辑。

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