时间戳

首页 > 解决方案 > React Bootstrap Popover：初始化时的 Pre-Open Popover

reactjs - React Bootstrap Popover：初始化时的 Pre-Open Popover

问题描述

如何预打开（初始化为打开）React Bootstrap Popover？我有以下在初始关闭状态下工作，

const popoverApproverNewAgreement = (
    <Popover id="popover-approverNewAgreement">
        <Popover.Title as="h3"></Popover.Title>
        <Popover.Content>
        Some text
        </Popover.Content>
    </Popover>
);

<OverlayTrigger trigger="click" rootClose placement="bottom" overlay={popoverApproverNewAgreement}>
    <a href="javascript:void(0)" className="more-info">
        <i className="fas fa-question-circle" aria-label="more information">
        </i>
    </a>
</OverlayTrigger>

标签： reactjsreact-bootstrap

解决方案

我无法使用它，OverlayTrigger但使用更通用的方法取得了成功，Overlay它需要 ashow={..}以便您可以使用状态变量显示/隐藏。

Overlay需要target ref如下。

// Ref for Link or Button triggering overlay (required for <Overlay> usage)
const refLink = useRef(null); 

// State variable
const [overlayOpen, setOverlayOpen]  = useState(true); // Initially open

<a ref={refLink} href="javascript:void(0)" onClick={() => setOverlayOpen(!overlayOpen)}>
    <i className="fas fa-question-circle" aria-label="more information">
    </i>
</a>
<Overlay target={refLink.current} show={overlayOpen} 
         onHide={() => setOverlayOpen(false)} rootClose placement="bottom">
    {popoverApprover}
</Overlay>

推荐阅读