React中点击表格图标触发弹窗竖向展示选中行内容如何实现

以下是针对React场景的最简实现方案，全程用函数组件+Hooks写法，适合初学者快速复用：

1. 定义必要状态 #

首先在你的表格组件顶部引入useState，声明两个核心状态：

import { useState } from 'react'

function YourTableComponent() {
  // 控制弹窗显隐
  const [isModalOpen, setIsModalOpen] = useState(false)
  // 存储当前选中的行数据
  const [selectedRow, setSelectedRow] = useState(null)

  // 原有表格的其他逻辑、数据都保留
  // ...
}

2. 给蓝色图标绑定点击事件 #

找到你渲染表格行的循环逻辑，在蓝色图标的节点上绑定点击回调，点击时保存当前行数据并打开弹窗：

// 假设你的表格行渲染逻辑类似如下结构，直接修改蓝色图标部分即可
return (
  <table>
    <thead>
      {/* 原有表头逻辑 */}
    </thead>
    <tbody>
      {tableData.map(row => (
        <tr key={row.id}>
          <td>
            {/* 原有的蓝色高亮图标 */}
            <button 
              className="your-blue-icon-class"
              onClick={() => {
                setSelectedRow(row)
                setIsModalOpen(true)
              }}
            >
              {/* 图标内容保持不变 */}
            </button>
          </td>
          {/* 其他列的原有渲染逻辑全部保留 */}
          {/* ... */}
        </tr>
      ))}
    </tbody>

    {/* 弹窗代码放在这里，下文会写 */}
  </table>
)

3. 实现弹窗+竖向展示行内容 #

你可以选择用组件库的弹窗，也可以手写原生弹窗，两种方案都提供：

方案A：用Ant Design Modal（项目已接入Antd优先选） #

先引入Modal组件，然后在表格组件的return末尾加弹窗逻辑：

// 顶部引入
import { Modal } from 'antd'

// 放在table标签同级的位置
<Modal
  title="行详情"
  open={isModalOpen}
  onCancel={() => {
    setIsModalOpen(false)
    setSelectedRow(null) // 关闭时清空选中数据，避免下次打开闪旧内容
  }}
  footer={null} // 不需要底部操作按钮可以加这行，要保留就删掉
>
  {/* 竖向遍历展示选中行的所有字段 */}
  {selectedRow && Object.entries(selectedRow).map(([fieldKey, fieldValue]) => (
    <div key={fieldKey} style={{ margin: '12px 0' }}>
      <span style={{ fontWeight: 500, minWidth: '100px', display: 'inline-block' }}>
        {/* 如果字段名是英文要转中文，提前维护一个映射对象替换即可，比如keyMap[fieldKey] */}
        {fieldKey}：
      </span>
      <span>{fieldValue}</span>
    </div>
  ))}
</Modal>

方案B：手写原生弹窗（无组件库用这个） #

不需要额外安装依赖，直接写样式实现弹窗：

{/* 放在table标签同级的位置 */}
{isModalOpen && selectedRow && (
  <div style={{
    position: 'fixed',
    inset: 0,
    background: 'rgba(0,0,0,0.5)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 999
  }}>
    <div style={{
      background: '#fff',
      padding: '24px',
      borderRadius: '8px',
      minWidth: '400px'
    }}>
      <h3 style={{ margin: '0 0 16px 0' }}>行详情</h3>
      {Object.entries(selectedRow).map(([fieldKey, fieldValue]) => (
        <div key={fieldKey} style={{ margin: '12px 0' }}>
          <strong>{fieldKey}：</strong>
          <span>{fieldValue}</span>
        </div>
      ))}
      <button
        onClick={() => {
          setIsModalOpen(false)
          setSelectedRow(null)
        }}
        style={{
          marginTop: '16px',
          padding: '6px 12px',
          cursor: 'pointer'
        }}
      >
        关闭
      </button>
    </div>
  </div>
)}

可选优化 #

如果行数据的字段名是英文，想要展示成中文表头，提前维护一个映射对象即可：

const fieldNameMap = {
  id: '序号',
  username: '用户名称',
  createTime: '创建时间',
  // 其他字段的对应关系自行补充
}

// 展示时把{fieldKey}替换成{fieldNameMap[fieldKey] || fieldKey}即可

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