为什么这个 react-bootstrap 模态没有正确响应？

Question

我正在开发一个使用模态对话框的 react-bootstrap 网络应用程序。多个模态对话框在应用程序中的不同位置呈现（例如，在不同的组件、route/switch 结构、不同的层次结构等）。但是，一次只有一个模式对话框处于活动状态。

直到现在我对这种方法从来没有遇到过问题（我对反应还比较陌生）。不知何故，我最终遇到了两个模态对话框是“semi-frozen”的情况？它们每个都按预期打开和关闭（按钮也可以工作），但我不能再编辑它们中的表单（例如也不能 select header 文本）。

两个对话框都有效，直到我在其他地方添加了更多对话框（至少这是我的猜测）。使用多模态对话框时有什么需要注意的吗？或者更一般地说，比如在哪里呈现模态对话框？

Modal dialogue in question

        <Modal show={show} onHide={discardChanges} backdrop={edited ? "static" : true}
               keyboard={edited ? false : true} size="lg" centered>
            <Modal.Header closeButton>
                <Modal.Title>{t("edit tour")}</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <TourContainer tourTemplate={editableTourTemplate} pointsOfInterest={pointsOfInterest}
                               dispatch={dispatchEditableTourTemplate} validated={edited} />
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={saveChanges} disabled={!(edited && editableTourTemplate.valid)}>
                    {t("save")}
                </Button>
                <Button onClick={discardChanges} variant="outline-primary">{t("cancel")}</Button>
            </Modal.Footer>
        </Modal>

它在另一个组件中呈现如下：

                                <Col>
                                    <button onClick={showEditModal} className="bg-white border-0">
                                        <img src="/img/pencil.png" alt="Pencil" height="25" width="25" />
                                    </button>
                                    <TourEditModal show={editModalVisible} hide={hideEditModal}
                                                   tourTemplate={tourTemplate}
                                                   pointsOfInterest={pointsOfInterest}
                                                   update={updateTourTemplates.update} />
                                </Col>

Answer 1

这两个模式之所以如此，是因为我将它们移到了 NavLink 元素中。这个 NavLink 元素在鼠标按下时有一个 preventDefault()，因为我不喜欢那里的按钮焦点。自然地，模态框变得无法聚焦。

一旦我将模式从 NavLink 元素中移出，它们就会再次按预期工作。

为什么这个 react-bootstrap 模态没有正确响应？

Why is this react-bootstrap modal not properly responding?

javascript

modal-dialog

reactjs

react-bootstrap