在React中如何实现点击指定图标复制并重复展示UI表格对应行

核心逻辑 #

表格行的渲染完全依赖你维护的数据源状态数组，复制行的本质就是找到对应行的数据，深拷贝一份后插入到原行的下一位，更新状态后视图会自动渲染新增的行。

具体实现步骤 #

• 维护表格数据源状态
  把所有表格行数据存在useState定义的响应式数组中，每一行数据必须携带唯一ID作为渲染的key，避免列表渲染异常。
• 绑定复制按钮点击事件
  循环渲染表格行时，把当前行的下标或者唯一ID作为参数传入复制处理函数。
• 实现复制处理逻辑
  点击后先根据传入的下标/ID拿到原行数据，对数据做深拷贝：如果是单层简单对象用展开运算符即可，复杂嵌套对象可以用structuredCloneAPI，避免原行和新行数据共享引用导致联动修改。给新行生成全新的唯一ID后，将新行插入到原行的下一个位置，生成新的数组更新状态即可。
• 可选优化
  复制完成后可以给新增的行加1~2秒的高亮过渡效果，明确提示用户操作成功；如果行内有表单控件，注意复制时要同步原行的表单值到新行，同时保证两行的表单状态互不影响。

可运行极简示例代码 #

import { useState } from 'react';

// 初始模拟表格数据
const initialData = [
  { id: 1, name: '张三', age: 22, department: '研发部' },
  { id: 2, name: '李四', age: 27, department: '产品部' }
];

function CopyableTable() {
  const [tableData, setTableData] = useState(initialData);

  const handleCopyRow = (rowIndex) => {
    // 取原行数据
    const originRow = tableData[rowIndex];
    // 深拷贝+生成新唯一ID，这里用时间戳+随机数生成，可替换为你项目的ID生成规则
    const copiedRow = {
      ...originRow,
      id: Date.now() + Math.floor(Math.random() * 1000)
    };
    // 新行插入到原行下一位，生成全新数组更新状态
    const newTableData = [
      ...tableData.slice(0, rowIndex + 1),
      copiedRow,
      ...tableData.slice(rowIndex + 1)
    ];
    setTableData(newTableData);
  };

  return (
    <table style={{ borderCollapse: 'collapse', width: '600px' }} border={1}>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>部门</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map((row, index) => (
          <tr key={row.id}>
            <td>{row.name}</td>
            <td>{row.age}</td>
            <td>{row.department}</td>
            <td>
              {/* 黄色高亮复制按钮，可替换为你的图标组件 */}
              <button 
                onClick={() => handleCopyRow(index)}
                style={{ background: '#ffc107', border: 'none', padding: '4px 8px', cursor: 'pointer' }}
              >
                复制行
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default CopyableTable;

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