PrimeReact 9.6.2单元格编辑问题：点击外部无法保存数据

在PrimeReact 9.2.3版本中，DataTable的单元格编辑功能正常：输入数据后点击单元格外部即可保存内容。但升级至9.6.2版本后，仅能通过回车键保存数据；若输入内容后直接点击单元格外部（未按回车），输入的数据会丢失。

相关代码如下：

DataTable组件代码 #

<DataTable 
  id="prDetailListTable" 
  value={prDetailList} 
  showGridlines 
  editMode="cell" 
  style={{}} 
  tableStyle={{ minWidth: '50rem' }} 
  header={addNewPrDetailHeader}
>
  {columns.map(({ field, header }) => {
    return (
      <Column
        key={field}
        field={field}
        header={header}
        headerClassName="text-900 font-semibold text-xl"
        style={{ textAlign: 'center' }}
        editor={(options) => cellEditor(options)}
        onCellEditComplete={onCellEditComplete}
        onBeforeCellEditShow={onBeforeCellEditShow}
        onBeforeCellEditHide={onBeforeCellEditHide}
        onCellEditCancel={onCellEditCancel}
        onCellEditInit={onCellEditInit}
      />
    );
  })}
</DataTable>

onCellEditComplete方法代码 #

const onCellEditComplete = (e) => {
  let { rowData, newValue, field, newRowData, props, rowIndex, originalEvent: event } = e;
  console.log(e);
}

核心问题：9.6.2版本中，点击单元格外部触发onCellEditComplete事件时，newValue为空；但9.2.3版本中该参数能正常获取新值，需要实现点击单元格外部保存编辑内容的功能。

1. 改用newRowData获取更新值 #

PrimeReact 9.x后续版本调整了单元格编辑的参数传递逻辑，点击外部触发完成事件时，newValue可能未正确赋值，但newRowData会包含当前行的完整更新数据。修改onCellEditComplete方法：

const onCellEditComplete = (e) => {
  const { field, newRowData, rowIndex } = e;
  // 从newRowData中提取对应字段的最新值
  const newValue = newRowData[field];
  // 执行你的保存逻辑，比如更新数据源
  prDetailList[rowIndex][field] = newValue;
  console.log('更新后的值:', newValue);
};

2. 手动从编辑器DOM元素取值 #

如果newRowData也未同步，可通过事件对象找到编辑元素直接取值：

const onCellEditComplete = (e) => {
  const { field, rowIndex, originalEvent } = e;
  // 定位当前编辑的输入/文本域元素
  const inputElement = originalEvent?.target?.closest('.p-cell-editor')?.querySelector('input, textarea');
  if (inputElement) {
    const newValue = inputElement.value;
    prDetailList[rowIndex][field] = newValue;
    console.log('手动获取的新值:', newValue);
  }
};

3. 优化自定义编辑器的blur事件 #

如果使用了自定义编辑器组件，确保在元素失去焦点时主动同步值到DataTable的编辑上下文：

const cellEditor = (options) => {
  return (
    <InputText 
      value={options.value} 
      onChange={(e) => options.editorCallback(e.target.value)}
      // 添加blur事件触发值同步
      onBlur={(e) => options.editorCallback(e.target.value)}
    />
  );
};

4. 通过onBeforeCellEditHide强制同步 #

若点击外部时事件触发逻辑异常，可在onBeforeCellEditHide中判断操作类型，强制同步值：

const onBeforeCellEditHide = (e) => {
  // 排除点击取消按钮的情况，仅处理外部点击
  if (e.originalEvent?.type === 'click' && !e.originalEvent.target.closest('.p-button')) {
    const inputElement = e.cell.querySelector('.p-cell-editor input, .p-cell-editor textarea');
    if (inputElement) {
      // 主动调用编辑器回调同步值
      e.editorCallback(inputElement.value);
    }
  }
};

内容的提问来源于stack exchange，提问作者Samet Dağ