Question

我正在使用React-Bootstrap Popover。一旦用户点击位于弹出窗口内的关闭按钮，我希望关闭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

I know that a lot of time has passed, today I had this same problem and I arrived here. I found a way to fix it.

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

then in the method

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

I hope I have helped

Answer 2

这就是帮助我的地方：

<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

我希望它也会对您有帮助！

关闭React-Bootstrap Popover，其中有一个弹出窗口内的按钮

2 个答案: