devextreme-react datagrid，分别启用编辑器以插入（新行）和编辑（现有行）

devextreme-react datagrid, enable editor separately for inserting (new rows) and editing (existing rows)

我正在使用 devextreme-react。我需要使一些单元格可插入（新行）但不可编辑（现有行），但配置仅提供 'allowEditing' 选项，不区分插入新记录或编辑现有记录。

我尝试为每个单元格提供自定义参数 'insertable' 和 'editable' 以使单元格在不同上下文中可单独编辑（在两种上下文中只能插入，只能编辑）。

然后我尝试了两种方法：

  1. onFocusedCellChanged 我会在不需要时关闭活动编辑器
  2. 将所有单元格的 allowEditing 设置为 false，并仅在必要时使用数据网格方法 editCell(rowIndex, visibleColumnIndex) 启用编辑器 onFocusedCellChanged。

这是第一种方法的示例：

如您所见，存在一些问题：

  1. 在第一个可编辑字段上自动对焦不会触发 onFocusedCellChanged
  2. 我想念一种了解某行是否为新行的方法，只是尝试检测键字段是否未定义或 null 不起作用
  3. closeEditCell 不会关闭编辑器

同样使用第二种方法焦点并不总是被触发并且手动启用编辑器什么都不做

我发现解决这个问题的唯一方法是使用 editCellRender，然后只有在满足适当条件时才会显示编辑器。

为了使用 editCellRender，我必须将列配置与网格配置分开并使用列组件（Datagrid.Column 来自 devextreme-react/data-grid）

为了区分插入和更新我依赖于 dxkey 属性，我不确定这是最好的方法。

这是带有解决方案的 codesandbox 分支：