Reactstrap非受控Popover点击分类时位置异常问题咨询

问题原因 #

你当前混用了非受控组件（UncontrolledPopover）和手动状态控制：UncontrolledPopover 内部会自行管理弹窗的显示/隐藏及位置计算，但你手动绑定了 isOpen 和 target 属性，导致切换目标时，组件无法及时重新计算新目标的位置，必须再次触发才能更新。

解决方案 #

方案1：改用受控 Popover 组件（推荐）

既然你已经通过 state 管理弹窗状态，使用受控的 Popover 组件更适配这种场景，能精准控制弹窗的显示状态和目标元素：

修改代码如下：

// 编辑按钮部分保持不变
<span
  className="material-icons-outlined icon icon-fs-16 text-primary cursor-pointer mr-6px"
  id={`add-edit-category-subcategory_${category.id}`}
  onClick={() => {
    this.changestatesStatus(
      category,
      `add-edit-category-subcategory_${category.id}`
    );
  }}
>
  edit
</span>

// 替换 UncontrolledPopover 为 Popover
<Popover
  className="custom-popover subcategory-popover"
  placement="right"
  isOpen={this.state.showPopover}
  target={this.state?.popoverId}
  toggle={() => this.setState({ showPopover: !this.state.showPopover })}
>
  {/* Popover 内容 */}
</Popover>

// 修改状态更新方法
changestatesStatus = (category, id) => {
  // 如果当前弹窗已打开且目标相同，直接关闭；否则更新目标并打开
  if (this.state.showPopover && this.state.popoverId === id) {
    this.setState({ showPopover: false });
  } else {
    this.setState({
      showPopover: true,
      isEdit: true,
      category: category,
      popoverId: id,
    });
  }
};

方案2：修复 UncontrolledPopover 的使用方式

如果坚持使用非受控组件，需要先关闭弹窗，再重新打开以触发位置重计算：

changestatesStatus = (category, id) => {
  // 先关闭弹窗，在回调中更新目标并重新打开
  this.setState({ showPopover: false }, () => {
    this.setState({
      showPopover: true,
      isEdit: true,
      category: category,
      popoverId: id,
    });
  });
};

说明 #

• 受控组件（Popover）更适合需要精准控制状态的场景，逻辑清晰，不易出现状态不同步问题。
• 非受控组件的修复方式利用了 setState 的回调特性，确保弹窗先关闭再绑定新目标，触发位置重新计算。

内容的提问来源于stack exchange，提问作者Dharmik