ReactJS表格中如何将Div弹窗精准定位在操作按钮旁？

核心思路 #

放弃通过rowIndex硬算Y轴偏移的方式，直接获取点击按钮的DOM位置来定位弹窗，避免因行高变化、页面滚动等因素导致的偏移误差。

具体实现步骤 #

1. 修改点击回调，获取按钮DOM位置
   确保Table组件的action回调能传递点击事件对象（若组件原生不支持，可通过自定义操作按钮并添加ref实现），通过事件对象拿到按钮元素后，用getBoundingClientRect()获取其在视口中的位置，再结合页面滚动距离计算弹窗的绝对位置。

2. 改用绝对定位渲染弹窗
   将弹窗的定位方式从transform改为position: absolute，直接使用计算出的top和left值定位，确保弹窗紧贴按钮下方/旁边。

修改后的代码示例 #

// 表格部分
<Table   
  className="table-hover"
  headers={MyAPi.getListHeaders()}
  data={this.state.data}
  dataKey="id" // 修正原代码的中文引号语法错误
  dataValue="value"
  actionIcon="gear"
  // 调整action回调，新增event参数
  action={(event: React.MouseEvent, rowIndex: any, row: any, id: string, value: string ) => {
      if (rowIndex === this.state.rowIndex) {
          this.setState({
              isOpen: false,
              rowIndex: -1
          });
          return;
      }
      // 获取按钮元素的视口位置
      const button = event.currentTarget;
      const rect = button.getBoundingClientRect();
      // 计算弹窗的绝对位置（兼容页面滚动）
      const dropdownTop = rect.bottom + window.scrollY;
      const dropdownLeft = rect.left + window.scrollX;

      this.setState({
          isOpen: true,
          rowIndex: rowIndex,
          dropdownTop,
          dropdownLeft
      });
  }}
></Table>

// 弹窗部分
{this.state.isOpen ? (
    <div
        style={{
            position: 'absolute',
            width: "110px",
            height: "120px",
            top: `${this.state.dropdownTop}px`,
            left: `${this.state.dropdownLeft}px`,
            backgroundColor: "#f3f4f5",
            border: "1px solid #C4C8CF",
            zIndex: 1000 // 确保弹窗在表格上方显示
        }}
    >
        <div style={{ listStyleType: "none", margin: 0, padding: 0 }}>
            {this.state.dropdownItems.map((item: any, index: number) => {
                return (
                    <li
                        style={{
                            color: "#444444",
                            padding: "10px 15px",
                            textAlign: "left",
                            fontSize: "14px",
                            cursor: "pointer",
                            margin: 0
                        }}
                        key={item}
                        onClick={(e) => {
                            this.handleClick(e);
                        }}
                    >
                        {item}
                    </li>
                );
            })}
        </div>
    </div>
) : null}

额外优化点 #

• 修正了原代码中中文引号的语法错误，统一使用英文引号。
• 给弹窗添加z-index属性，避免被表格内容遮挡。
• 调整列表项的内外边距，优化弹窗内部样式的整洁度。

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