使用弹出框内的按钮关闭 React-Bootstrap 弹出框答案

【问题标题】：Close React-Bootstrap Popover with a button that's inside popover使用弹出框内的按钮关闭 React-Bootstrap 弹出框
【发布时间】：2017-02-15 20:27:54
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案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

希望对你也有帮助！

【讨论】：

但是如何使用切换类型？

【解决方案2】：

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

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

然后在方法中

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

希望对你有所帮助

【讨论】：