如何在React中实现点击单元格后在其上方显示弹窗？

一、原生HTML+CSS（React适配） #

这个方案无需手动计算位置，靠CSS定位就能实现响应式适配，逻辑最简单。

核心思路 #

将弹窗与单元格放在同一个相对定位容器内：单元格所在容器设为position: relative，弹窗设为position: absolute，通过top和left属性直接定位到单元格正上方。

代码示例 #

import { useState } from 'react';

const Cell = ({ id }) => {
  const [showPopup, setShowPopup] = useState(false);

  return (
    <div className="cell-container">
      {/* 可点击的单元格 */}
      <div 
        className="cell"
        onClick={() => setShowPopup(!showPopup)}
      >
        单元格 {id}
      </div>

      {/* 弹窗元素，默认隐藏 */}
      {showPopup && (
        <div className="cell-popup">
          <button>操作1</button>
          <button>操作2</button>
          <button onClick={() => setShowPopup(false)}>关闭</button>
        </div>
      )}
    </div>
  );
};

const Grid = () => {
  return (
    <div className="grid">
      {Array.from({ length: 9 }).map((_, i) => (
        <Cell key={i} id={i+1} />
      ))}
    </div>
  );
};

对应的CSS：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
  padding: 20px;
}

.cell-container {
  /* 关键：作为弹窗的定位基准 */
  position: relative;
}

.cell {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cell-popup {
  position: absolute;
  /* 定位到单元格正上方，水平居中 */
  top: -50px; /* 留10px间距，可根据弹窗高度调整 */
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
}

优势 #

• 响应式场景下自动适配，单元格大小变化时弹窗位置同步调整
• 无需处理DOM位置计算，性能稳定

二、React组件库方案 #

如果不想手动写CSS，可使用支持锚点定位的组件库，自带无障碍特性和响应式适配：

1. Radix UI Popover #

原生支持锚点定位，只需指定弹窗显示方向即可自动计算位置，还内置点击外部关闭、键盘导航等功能。

代码示例

import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover';

const Cell = ({ id }) => {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <div className="cell">单元格 {id}</div>
      </PopoverTrigger>
      <PopoverContent 
        side="top" // 指定弹窗显示在锚点上方
        align="center" // 与锚点水平居中
        className="popover-content"
      >
        <button>操作1</button>
        <button>操作2</button>
      </PopoverContent>
    </Popover>
  );
};

2. MUI Menu组件 #

通过anchorEl绑定点击的单元格，配置anchorOrigin和transformOrigin控制弹窗位置，适合使用Material UI的项目。

代码示例

import { useState } from 'react';
import { Menu, MenuItem } from '@mui/material';

const Cell = ({ id }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <>
      <div 
        className="cell"
        onClick={handleClick}
      >
        单元格 {id}
      </div>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
      >
        <MenuItem onClick={handleClose}>操作1</MenuItem>
        <MenuItem onClick={handleClose}>操作2</MenuItem>
      </Menu>
    </>
  );
};

补充提示 #

• 原生方案中需给弹窗设置足够高的z-index，避免被其他元素遮挡
• 组件库方案自带无障碍支持，适合生产环境快速落地
• 两种方案都无需手动调用getBoundingClientRect()计算位置，自动适配响应式布局

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