Question

我在Overlay触发器中使用Popover进行删除确认控件。主页面有一个项目列表，每个项目都有一个可点击的X按钮，用于启动与用户的删除交互。接下来显示弹出窗口，用户单击“确认”继续删除。该对象将被删除，集合视图将重新查询应该在列表中的数据。已删除的项目不再在列表中，但弹出窗口仍然可见。

这对我来说真的很奇怪，因为（据我所知），任何 render（）方法都不再引用Overlay Trigger和Popover组件。

这似乎与react-bootstrap ModalTrigger doesn't hide when the parent element is unmounted有些相似，但与此情况不同，在这种情况下没有使用keys属性。

相关方法看起来像......

＆＃13;

  render() {
    return (
      <tr
        className={this.listStyles()}
      >
        {this.renderListName()}
        {this.renderOwner()}
        <td>{this.renderLastModified()}</td>
        <td>
        {this.renderButtons()}
        {this.renderProcessing()}
        </td>
      </tr>
    );
  },
    
  renderOverlay() {
    return (
      <OverlayTrigger
        trigger='click'
        onEntering={this.handleDeletePopoverOpened}
        onExiting={this.handleDeletePopoverClosed}
        rootClose
        placement='bottom'
        overlay={this.renderPopover()}
      >
        {this.renderDeleteButton()}
      </OverlayTrigger>
    )
  },

  renderPopover() {
    return (
      <Popover id='delete_list' title="Confirm Delete">
        <strong>Are you sure?</strong>
        <ButtonGroup bsSize='small' className='deletionGroup'>
          <Button bsStyle='danger' onClick={this.handleDelete}>Delete</Button>
        </ButtonGroup>
      </Popover>
    )
  },

＆＃13;

我已经尝试明确地预测状态上弹出窗口的呈现，然后在componentWillUnmount方法中设置该状态，以便它应该隐藏弹出窗口。这（正如人们所预料的那样）也无法工作，这无疑是因为代码永远不会运行，因为渲染方法（正确地）没有被调用。

我做错了吗？这只是React Bootsrap的缺陷吗？亲切的问候。

Answer 1

一年前的问题，所以我希望你找到一个解决方案： - ）

同样的问题依然存在：我通过将rootClose添加到我的触发器来解决它。

Answer 2

如果错误仍然存在...

使用“rootClose”附件，只需点击外部即可使弹出框消失。

...
  <OverlayTrigger trigger="click" rootClose placement="right" overlay={popover}>
...

用“焦点”触发器替换“点击”触发器..使其通过点击它消失......

...
  <OverlayTrigger trigger="focus" placement="right" overlay={popover}>
...

来源.. How to Dismiss a React-Bootstrap Popover on Click Outside

删除逻辑父级时，覆盖触发器中的React Bootstrap Popover不会消失

2 个答案: