KendoReact Grid新增或编辑条目时列跳转错位如何解决？

你当前的表格在每次状态更新渲染时，都会无条件对数据应用orderBy排序规则，当新增/编辑操作修改了排序字段对应的值时，条目会立即按当前排序规则重新排列，导致视觉上出现行跳转错位的问题。你虽然已经在手动修改排序的回调里做了编辑状态拦截，但没有拦截渲染时的自动排序逻辑，同时新增操作没有同步更新全局inEdit状态，导致新增时依然会触发自动排序。

1. 调整渲染时的排序逻辑，编辑状态下暂停自动排序 #

修改Grid组件的data属性，判断全局inEdit状态，编辑状态下直接使用原始数据，不做排序处理：

<Grid
  // 编辑状态下暂停自动排序，避免行跳转
  data={this.state.inEdit ? this.state.data : orderBy(this.state.data, this.state.sort)}
  onItemChange={this.itemChange}
  sortable={true}
  sort={this.state.sort}
  editField="inEdit"
  onSortChange={this.handleSortChange}
>

2. 新增操作同步更新全局inEdit状态 #

修改enterInsert方法，新增时把全局编辑状态设为true，触发暂停排序逻辑：

enterInsert() {
  const dataItem = { inEdit: true, Discontinued: false };
  const newproducts = this.state.data.slice();
  newproducts.unshift(dataItem);
  this.update(newproducts, dataItem);
  this.setState({
    data: newproducts,
    // 新增时同步开启全局编辑状态
    inEdit: true
  });
}

• 新增条目时，行会固定在表格顶部，不会立即触发排序跳转
• 编辑已有条目时，修改排序字段内容不会触发行位置变动
• 点击保存/取消按钮后，全局inEdit状态重置为false，表格自动恢复排序，条目归位到对应排序位置
• 非编辑状态下的手动排序功能不受影响

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