為什么這個 react-bootstrap 模式沒有正確響應？

Question

我正在開發一個使用模式對話框的 react-bootstrap web 應用程序。 多個模態對話框在應用程序的不同位置呈現（例如，在不同的組件、路由/開關結構、不同層次的層次結構等）。 但是，一次只有一個模式對話框處於活動狀態。

到目前為止，我從未對這種方法有任何疑問（我對反應比較陌生）。 不知何故，我最終陷入了兩個模式對話框“半凍結”的情況？ 它們每個都按預期打開和關閉（按鈕也可以工作），但我無法再編輯其中的表單（例如 select header 文本也無法編輯）。

兩個對話框都在工作，直到我在其他地方添加了更多對話框（至少這是我的猜測）。 使用多個模式對話框時我需要注意什么？ 或者更一般地喜歡在哪里呈現模態對話框？

有問題的模態對話

        <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 元素，它們就會再次按預期工作。