React Data Grid除Read Only Edit外是否具备Read Only Deletion功能？

AG Grid的**只读编辑（Read Only Edit）**功能可将网格转换为受控组件，方便在外部（比如Redux Store）统一管理数据状态。编辑场景下，我们能通过cellEditRequest事件同步外部状态，但按下Del键删除单元格值时，操作会直接修改本地数据，没有对应事件触发外部状态更新，导致外部状态与网格本地状态不一致。

可行解决方案 #

1. 拦截Del键事件，手动触发外部状态更新

通过onCellKeyDown事件监听键盘操作，拦截Delete键的默认行为，转而触发自定义的外部状态更新逻辑：

const handleCellKeyDown = (params) => {
  if (params.event.key === 'Delete') {
    // 阻止AG Grid默认的本地删除行为
    params.event.preventDefault();
    // 执行你的外部状态更新逻辑，比如Redux dispatch
    updateGridData(params.rowData.id, params.colDef.field, '');
  }
};

// 在gridOptions中配置该事件
const gridOptions = {
  // 其他配置...
  onCellKeyDown: handleCellKeyDown,
};

2. 用valueSetter确保状态唯一来源

配合valueSetter配置，只允许外部状态同步后的更新生效，彻底杜绝本地私自修改：

const valueSetter = (params) => {
  // 只有当新值与外部管理的状态一致时，才允许本地更新
  return params.newValue === getExternalRowData(params.rowData.id)[params.colDef.field];
};

// 在列定义中配置valueSetter
const columnDefs = [
  {
    field: 'name',
    valueSetter: valueSetter,
    // 其他列配置...
  },
];

3. 精准禁用默认删除行为

如果需要更细粒度的控制，可以使用suppressKeyboardEvent来拦截特定场景下的Delete键操作：

const suppressKeyboardEvent = (params) => {
  const { event, editing } = params;
  // 仅在单元格编辑状态下拦截Delete键
  return event.key === 'Delete' && editing;
};

// 在gridOptions中配置
const gridOptions = {
  // 其他配置...
  suppressKeyboardEvent: suppressKeyboardEvent,
};

通过以上方式，就能把Del键的删除操作纳入外部状态管理流程，和编辑操作保持一致的受控逻辑。

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