Javascript 为什么此react引导模式没有正确响应？

我正在开发一个使用模态对话框的react引导web应用程序。多模式对话框在应用程序中的不同位置呈现（例如，在不同组件、路由/交换机结构、不同层次结构等中）。但是，一次只有一个模式对话框处于活动状态

到目前为止，我从未对这种方法有过任何问题（我对这种方法的反应相对较新）。不知何故，我最终陷入了两个模态对话框“半冻结”的境地？它们按预期打开和关闭（按钮也可以工作），但我无法再编辑其中的表单（例如，也无法选择标题文本）

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

{t（“编辑教程”）}
{t（“保存”）}
{t（“取消”）}

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

                                <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>

---

这两个模态如此运行的原因是我将它们移动到了NavLink元素中。这个NavLink元素在鼠标按下时有一个preventDefault（），因为我不喜欢那里的按钮焦点。自然，情态动词变得不可聚焦

---

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

这两个模态如此工作的原因是我将它们移到了NavLink元素中。这个NavLink元素在鼠标按下时有一个preventDefault（），因为我不喜欢那里的按钮焦点。自然，情态动词变得不可聚焦

---

一旦我将模态从NavLink元素中移出，它们又按预期工作了。

我的第一个猜测是，问题不在模态中，而在形式中。检查你的代码，确保你没有一个循环，你都设置和更改道具到TourEditModal。如果这些都是在加载时被修改的，并且加载改变了触发另一个加载的道具，这可能会导致一个无限循环。谢谢你的建议！问题确实不在于情态动词本身（见下面的答案）。但多亏了你，我进行了更仔细的检查，并注意到了一些其他问题，我仍然需要解决。我的第一个猜测是，问题不在模态中，而是在形式中。检查你的代码，确保你没有一个循环，你都设置和更改道具到TourEditModal。如果这些都是在加载时被修改的，并且加载改变了触发另一个加载的道具，这可能会导致一个无限循环。谢谢你的建议！问题确实不在于情态动词本身（见下面的答案）。但多亏了你，我进行了更仔细的检查，并注意到了一些其他问题，我仍然需要继续努力。

                                <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>