antd 存在多个Popover气泡该如何控制

antd 存在多个Popover气泡该如何控制

后台返回数据, 每一列上的数据都需要一个popover, 因此我们的页面中存在多个popover.

而我们常规思路是通过一个变量来控制显示或者隐藏, 但是由于页面多个popover仅仅是通过一个变量是不行.

变量为true/false的话, 那么所有的popover都会显示, 出现的结果一起显示或者一起隐藏.

解决方案:

借助另外一个变量, 也就是当前行的唯一标识, 可以是id, 也可以是key

this.state = {
    visible: false, // 默认是不显示的
    show: -1
}

// 效果就是每一行有文字, 点击文字, 显示popover, 然后再点击popover上面的文字进而出现弹框, 并且popover隐藏
data.map(v=>{
     return <TreeNode
                key={item.key}
                title={
                  <Popover
                    overlayClassName={\"prdInfoPopver\"}
                    placement=\"right\"
                    trigger=\"click\"
    				// 每行的popover, 需要通过当前行的唯一标识和visible一起控制, 这样就不会相互影响了
                    visible={this.state.show === item.key && this.state.visible} 
                    onVisibleChange={(e) =>
                      this.handleVisibleChange(e, item.key)
                    }
                    autoAdjustOverflow={true}
                    content={
                      <span
                        className={\"popoverContent\"}
                        onClick={this.popoveClick} // 这个打开出现弹框, 还需要隐藏popover
                      >
                        在流程中打开
                      </span>
                    }
                  >
                    {title}
                  </Popover>
                }
              />
})

// 监听popover显示隐藏事件
  handleVisibleChange = (visible, key) => {
     // visible = true / false;
    if (visible) {
      this.setState({ visible, show: key }); // 如果是显示的话, 将显示popover, 因此需要修改visible和show
    } else {
      this.setState({ visible, show: -1 }); // 隐藏
    }
  };

// 点击popover文字, 出现弹框, 还需要隐藏popover
popoveClick = (e) => {
    this.setState({
      visible: false,
      show: -1,
    });
}