react-data-grid单元格编辑回调/钩子问题求助及示例需求

react-data-grid 本身提供了编辑相关的回调，可能你在文档里没找到对应入口。常用的捕获编辑完成事件的方法有两种：利用内置的 onGridRowsUpdated 回调，或者自定义单元格编辑器来处理。

方法一：使用内置回调处理编辑完成后的数据库更新 #

这是最常用的方式，onGridRowsUpdated 会在用户完成单元格编辑（比如回车、点击其他单元格）时触发：

import React, { useState } from 'react';
import DataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID', editable: false },
  { key: 'name', name: '名称', editable: true },
  { key: 'value', name: '数值', editable: true }
];

export default function MyGrid() {
  const [rows, setRows] = useState([
    { id: 1, name: '项目A', value: 150 },
    { id: 2, name: '项目B', value: 280 }
  ]);

  const handleRowUpdate = ({ fromRow, updated }) => {
    // 先更新本地数据状态
    const updatedRows = rows.map(row => 
      row.id === fromRow ? { ...row, ...updated } : row
    );
    setRows(updatedRows);

    // 发送PUT请求更新数据库
    const targetRow = updatedRows.find(row => row.id === fromRow);
    fetch(`/api/your-endpoint/${targetRow.id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(targetRow)
    })
    .then(res => res.json())
    .then(() => console.log('数据更新成功'))
    .catch(err => console.error('更新失败:', err));
  };

  return (
    <DataGrid
      columns={columns}
      rows={rows}
      onGridRowsUpdated={handleRowUpdate}
      enableRowSelect={false}
    />
  );
}

方法二：自定义单元格编辑器实现实时/精细控制 #

如果需要实时监听输入（比如边输入边保存），可以自定义编辑器组件：

// 自定义文本编辑器
const CustomEditor = ({ value, onChange }) => {
  const handleInputChange = (e) => {
    const newValue = e.target.value;
    onChange(newValue);
    // 这里可以添加防抖逻辑后发送请求，避免频繁调用接口
    // 比如使用 lodash.debounce
  };

  return <input type="text" value={value} onChange={handleInputChange} />;
};

// 在列配置中使用自定义编辑器
const columns = [
  {
    key: 'name',
    name: '名称',
    editable: true,
    editor: CustomEditor
  }
];

两种方式按需选择：onGridRowsUpdated 适合确认后再提交的场景，自定义编辑器适合需要实时响应的需求。

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