React实现表格行按钮点击打开弹窗并传递参数的方法

我来帮你搞定这个需求！其实核心就是通过状态管理弹窗的显示/隐藏，同时把当前行的参数传递给弹窗组件就行，下面是具体的实现步骤和代码示例：

第一步：添加状态管理弹窗和选中行数据 #

在你的Benchmarks组件里，用useState添加两个状态：一个控制弹窗是否打开，另一个存储点击行的详细数据。

第二步：修改点击事件，接收行数据并更新状态 #

把handleClick改成接收行数据的函数，点击时设置弹窗为打开状态，同时把当前行的数据存到状态里。

第三步：编写弹窗组件 #

写一个弹窗组件，根据isModalOpen的状态决定是否渲染，并且使用selectedRowData来展示详情。

第四步：给按钮绑定点击事件并传递当前行数据 #

在按钮的onClick里调用handleClick，把当前行的所有需要的参数传进去。

完整代码示例 #

import React, { useState } from 'react';

// 独立的弹窗组件，可根据需求自定义样式和内容
const DetailModal = ({ isOpen, rowData, onClose }) => {
  if (!isOpen) return null;

  return (
    <div style={{ 
      position: 'fixed', 
      top: 0, 
      left: 0, 
      width: '100%', 
      height: '100%', 
      background: 'rgba(0,0,0,0.5)', 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center'
    }}>
      <div style={{ 
        background: 'white', 
        padding: '2rem', 
        borderRadius: '8px', 
        width: '80%', 
        maxWidth: '600px'
      }}>
        <h2>{rowData.indicator_name}</h2>
        <p><strong>描述：</strong>{rowData.indicator_desc}</p>
        <p><strong>基准值：</strong>{rowData.indicator_bench}</p>
        <p><strong>日期：</strong>{rowData.indicator_approx_date}</p>
        <button onClick={onClose} style={{ marginTop: '1rem', padding: '0.5rem 1rem' }}>关闭弹窗</button>
      </div>
    </div>
  );
};

const Benchmarks = ({ 
  indicator_name, 
  indicator_desc, 
  indicator_bench, 
  indicator_approx_date, 
  indicator_avg_field, 
  detail_link 
}) => {
  // 状态：控制弹窗显示/隐藏 + 存储选中行的详细数据
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedRowData, setSelectedRowData] = useState(null);

  // 处理按钮点击：接收当前行数据，打开弹窗并保存数据
  const handleClick = (rowData) => {
    setSelectedRowData(rowData);
    setIsModalOpen(true);
    console.log('选中的行数据：', rowData); // 可用于调试
  };

  // 关闭弹窗的回调函数
  const handleCloseModal = () => {
    setIsModalOpen(false);
    setSelectedRowData(null);
  };

  return (
    <tr>
      {/* 表格单元格内容，根据你的实际需求渲染 */}
      <td>{indicator_name}</td>
      <td>{indicator_desc}</td>
      <td>{indicator_bench}</td>
      {/* 详情按钮：点击时传递当前行的所有参数 */}
      <td>
        <button onClick={() => handleClick({
          indicator_name,
          indicator_desc,
          indicator_bench,
          indicator_approx_date,
          indicator_avg_field,
          detail_link
        })}>
          查看详情
        </button>
      </td>
      {/* 引入弹窗组件，传递状态和回调 */}
      <DetailModal 
        isOpen={isModalOpen} 
        rowData={selectedRowData} 
        onClose={handleCloseModal} 
      />
    </tr>
  );
};

export default Benchmarks;

关键细节说明 #

1. 弹窗组件的独立性：把弹窗做成独立组件可以让代码更清晰，也方便复用，你可以根据项目需求替换成UI库（比如Ant Design、Material UI）的弹窗组件。
2. 参数传递方式：用箭头函数包裹handleClick，可以轻松把当前行的所有props传递进去，确保弹窗能拿到完整的行数据。
3. 状态隔离：如果你的表格是用map循环生成的Benchmarks组件，每个行组件都会有自己独立的弹窗状态，不会互相干扰。

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