使用 popover 内的按钮关闭 React-Bootstrap Popover

Question

我正在使用 React-Bootstrap Popover。一旦用户单击位于弹出框内的关闭按钮，我希望弹出框关闭。我更喜欢不使用 refs 的解决方案，因为 facebook 不建议使用它们。这是我的代码

const popoverTop = (
  <Popover id="popover-positioned-top" title="Popover top">
    <button type="button" className="close">&times;</button>
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

<OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>
  <Button>Holy guacamole!</Button>
</OverlayTrigger>

Answer 1

这是帮助我的原因：

<OverlayTrigger
    container={this}
    trigger="click"
    placement="right"
    overlay={this.popoverClick}
    rootClose={true}
>
    <Button aria-label="Get Info" bsSize="medium">
        Button Name
    </Button>
</OverlayTrigger>

popoverClick 在哪里：

<Popover id="popover-positioned-scrolling-right" className="popover-main">
    <div className="popover-custom-header">
        <h3 className="popover-title">Your Title</h3>
        <IconButton aria-label="Close" className="icon-button" 
                    onClick={() => document.body.click()}>
            <Close fontSize="small"/>
        </IconButton>
    </div>
    <div class="popover-custom-content">
        {/* ... the content you need */}
    </div>
</Popover>

document.body.click() -> 完成所有工作。

参考：https : //stackoverflow.com/a/47636953/9743227

我也希望它能帮助你！

Answer 2

我知道已经过去很多时间了，今天我遇到了同样的问题，所以我来到了这里。我找到了解决它的方法。

<OverlayTrigger trigger = 'your-trigger' placement = 'auto' rootClose 
ref = 'overlay'>
  <Popover title='' >
  ------
  </Popover>
    <Button onClick={ this.hidePopover } ></Button>
</OverlayTrigger>

然后在方法中

hidePopover = ( ) => 
{
   this.refs.overlay.handleHide();
}

我希望我有所帮助