![](/img/trans.png)
[英]React-Bootstrap: Modal in DOM but not Displaying Properly on page
[英]Why is this react-bootstrap modal not properly responding?
我正在开发一个使用模式对话框的 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>
这两个模态以这种方式表现的原因是我将它们移到了 NavLink 元素中。 这个 NavLink 元素在鼠标按下时有一个 preventDefault() ,因为我不喜欢那里的按钮焦点。 自然,模态变得无法聚焦。
一旦我将模式移出 NavLink 元素,它们就会再次按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.