如何在React中获取KendoReact Spreadsheet的变更数据？

核心思路 #

KendoReact Spreadsheet的onChange事件会返回包含操作信息的事件对象，通过该对象可以获取当前工作表实例，进而提取指定列（如values列）的最新数据。

基础实现示例 #

以下是一个完整的React组件示例，实现监听values列变更并获取该列最新数据：

import { Spreadsheet } from '@progress/kendo-react-spreadsheet';
import { useState } from 'react';

export default function ValueColumnTracker() {
  // 初始化表格数据源
  const [sheetData, setSheetData] = useState([
    { id: 1, values: 15, note: '初始数据1' },
    { id: 2, values: 25, note: '初始数据2' },
    { id: 3, values: 35, note: '初始数据3' }
  ]);

  const handleChange = (event) => {
    // 获取当前激活的工作表实例
    const activeSheet = event.sender.activeSheet();
    // 将工作表数据转换为JSON格式，方便提取列数据
    const updatedSheetData = activeSheet.toJSON();

    // 提取`values`列的所有最新数据
    // 这里根据columns定义的顺序，`values`是第二列（索引1）
    const valuesColumn = updatedSheetData.rows.map(row => ({
      rowId: row.cells[0]?.value,
      value: row.cells[1]?.value
    })).filter(item => item.rowId !== undefined);

    // 此处可根据需求处理数据，比如打印、提交等
    console.log('Values列最新数据:', valuesColumn);

    // 同步更新本地状态（如果需要绑定回表格）
    setSheetData(updatedSheetData.rows.map(row => ({
      id: row.cells[0]?.value,
      values: row.cells[1]?.value,
      note: row.cells[2]?.value
    })));
  };

  return (
    <Spreadsheet
      data={sheetData}
      onChange={handleChange}
      sheets={[
        {
          name: '数据表格',
          columns: [
            { name: 'id', title: '序号' },
            { name: 'values', title: '数值列' }, // 目标监听列
            { name: 'note', title: '备注' }
          ]
        }
      ]}
    />
  );
}

精准监听指定列变更 #

如果只需要在values列的单元格发生变更时触发逻辑，可以通过判断变更范围的列信息实现：

const handleChange = (event) => {
  const activeSheet = event.sender.activeSheet();
  const changedRange = event.range;

  // 遍历所有变更的单元格
  for (let row = changedRange.top; row <= changedRange.bottom; row++) {
    for (let col = changedRange.left; col <= changedRange.right; col++) {
      const columnInfo = activeSheet.column(col);
      // 判断当前变更的列是否为`values`列
      if (columnInfo.name === 'values') {
        const cellValue = activeSheet.cell(row, col).value();
        console.log(`Values列第${row + 1}行更新值:`, cellValue);
        
        // 若需要整列数据，依然可以用toJSON()提取
        const fullValuesColumn = activeSheet.toJSON().rows.map(r => r.cells[col]?.value);
        console.log('Values列完整最新数据:', fullValuesColumn);
      }
    }
  }
};

常见问题排查 #

• 未正确获取工作表实例：必须通过event.sender.activeSheet()获取当前操作的工作表，不能直接使用原始props数据（原始数据不会实时更新）
• 未转换数据格式：工作表内部数据需要通过toJSON()转换为可操作的JSON结构，直接操作单元格实例容易出错

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