AgGridReact停止编辑并恢复旧值

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

const MyGrid = () => {
  const [rowData, setRowData] = useState([
    { id: 1, name: 'John Doe', age: 30 },
    { id: 2, name: 'Jane Smith', age: 25 },
  ]);

  const handleCellEditingStarted = (event) => {
    // 保存旧值
    event.api.setFocusedCell(event.rowIndex, event.column.colId);
    const oldValue = event.api.getValue(event.rowIndex, event.column.colId);
    event.column.oldValue = oldValue;
  };

  const handleCellEditingStopped = (event) => {
    // 恢复旧值
    const oldValue = event.column.oldValue;
    event.api.setValue(oldValue);
  };

  const columnDefs = [
    { headerName: 'ID', field: 'id', editable: false },
    { headerName: 'Name', field: 'name', editable: true },
    { headerName: 'Age', field: 'age', editable: true },
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: '300px', width: '600px' }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        onCellEditingStarted={handleCellEditingStarted}
        onCellEditingStopped={handleCellEditingStopped}
      />
    </div>
  );
};

export default MyGrid;