javascript - 删除逻辑父级时，叠加触发器中的 React Bootstrap Popover 不会消失

Question

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

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

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

相关方法看起来像...

  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>
    )
  },

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

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

Answer 1

多年的问题，所以我希望你找到了解决方案:-)

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