javascript - react-table 可编辑内容+排序；可编辑单元格不更新？

Question

当修改一列中会影响排序顺序的数据时，数据会正确重新排序，但使用的输入不会更新为新行数据。

这里复现最简单https://codesandbox.io/s/kky34kkwr

1. 在第 2 列“年龄”第 3 行中输入 99
2. 按tab键
3. 注意顶行现在是我们编辑的行，age=99，full=198

我们应该在这里看到的是我们输入 99 移动到表格顶部的行(就像它所做的那样)，并且替换我们编辑的先前位置的行的新行应该包含数据与该新行相关联(不是 99)。

我似乎找不到强制更新的方法，甚至找不到以不明智的方式实现我想要的东西的简陋黑客。希望有人能帮忙!

编辑:此图像显示了上述说明的第 2 步之后立即显示的内容。

Answer 1

对于遇到此问题的任何人，在我们等待修复的同时，我找到了解决方法。

鉴于原始问题中的示例，将 renderEditable 替换为以下内容将正确执行:

renderEditable(cellInfo) {
  return (
    <div
      style={{ backgroundColor: "#fafafa" }}
      contentEditable
      suppressContentEditableWarning
      onBlur={e => {
        const data = [...this.state.data];
        data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
        data[cellInfo.index].full = data[cellInfo.index].age * 2;
        e.target.innerHTML = this.state.data[cellInfo.index][cellInfo.column.id];
        this.setState({ data });
      }}
    >{this.state.data[cellInfo.index][cellInfo.column.id]}</div>
  );
}

onBlur 事件在表重新排序之前触发，所以如果我们只是获取值，将其放在一边，然后将 innerHTML 重置为之前的原始值使用 setState 触发度假村，我们最终会显示正确的值。这并不理想，但确实有效。不要忘记验证输入。