自定义PrimeReact Data Table行内编辑按钮及事件处理问题

核心问题分析 #

自定义操作按钮时点击事件无法获取行数据或最新状态，本质是事件绑定未传递行上下文或闭包导致状态未更新，只需在渲染按钮时显式传入当前行数据，并确保事件处理函数能访问最新状态即可解决。

实现步骤与代码示例 #

以下是基于函数组件的完整行内编辑实现，包含自定义编辑/删除/保存/取消按钮组：

1. 定义组件状态

import { useState, useCallback } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';

export default function CustomInlineEditTable() {
  // 表格数据源
  const [products, setProducts] = useState([
    { id: 1, name: 'Product A', price: 100 },
    { id: 2, name: 'Product B', price: 200 }
  ]);
  // 存储当前处于编辑状态的行数据
  const [editingRow, setEditingRow] = useState(null);

2. 自定义操作列渲染逻辑
   通过Column的body属性渲染按钮组，点击时直接传入当前行数据，根据编辑状态切换按钮显示：

const actionBodyTemplate = (rowData) => {
    // 判断当前行是否处于编辑状态
    if (editingRow?.id === rowData.id) {
      return (
        <div className="flex gap-2">
          <Button icon="pi pi-check" onClick={() => handleSave(rowData)} />
          <Button icon="pi pi-times" onClick={() => setEditingRow(null)} />
        </div>
      );
    } else {
      return (
        <div className="flex gap-2">
          <Button icon="pi pi-pencil" onClick={() => handleEdit(rowData)} />
          <Button icon="pi pi-trash" onClick={() => handleDelete(rowData)} />
        </div>
      );
    }
  };

3. 绑定事件处理函数（解决闭包问题）
   用useCallback包裹处理函数，确保能访问最新状态；更新数据时使用函数式更新避免状态滞后：

// 触发行编辑状态
  const handleEdit = useCallback((row) => {
    setEditingRow({ ...row }); // 拷贝行数据，避免直接修改原列表
  }, []);

  // 保存编辑内容
  const handleSave = useCallback((row) => {
    setProducts(prevProducts => 
      prevProducts.map(item => 
        item.id === row.id ? { ...item, ...editingRow } : item
      )
    );
    setEditingRow(null);
  }, [editingRow]);

  // 删除指定行
  const handleDelete = useCallback((row) => {
    setProducts(prevProducts => prevProducts.filter(item => item.id !== row.id));
    // 如果删除的是正在编辑的行，清空编辑状态
    if (editingRow?.id === row.id) setEditingRow(null);
  }, [editingRow]);

4. 渲染可编辑的数据列
   和官方示例逻辑一致，通过editor属性定义编辑组件，基于editingRow同步输入值：

const nameEditor = (rowData) => {
    return (
      <InputText 
        value={editingRow?.name || rowData.name} 
        onChange={(e) => setEditingRow(prev => ({ ...prev, name: e.target.value }))} 
      />
    );
  };

  const priceEditor = (rowData) => {
    return (
      <InputText 
        value={editingRow?.price || rowData.price} 
        onChange={(e) => setEditingRow(prev => ({ ...prev, price: e.target.value }))} 
      />
    );
  };

  return (
    <DataTable value={products} rowKey="id">
      <Column field="name" header="产品名称" editor={(props) => nameEditor(props.rowData)} />
      <Column field="price" header="价格" editor={(props) => priceEditor(props.rowData)} />
      <Column header="操作" body={actionBodyTemplate} />
    </DataTable>
  );
}

关键注意事项 #

• 显式传递行数据：在按钮onClick中直接传入rowData，确保事件处理函数能拿到当前行的上下文。
• 避免直接修改原数据：进入编辑状态时拷贝行数据到editingRow，防止未保存时就修改原列表数据。
• 解决闭包问题：用useCallback包裹事件函数，并依赖editingRow等状态，确保函数能访问最新的状态值；更新列表时使用函数式更新（prev => ...），避免状态滞后。
• 编辑状态判断：通过editingRow的唯一标识（如id）判断当前行是否处于编辑状态，动态切换按钮组。

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