Javascript 反应表可编辑内容+；分类；可编辑单元不'；不更新？

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

在这里复制是最简单的

在第3行第2列“年龄”中输入99

按tab键

注意，最上面一行现在是我们编辑的行，年龄=99，完整=198

这里我们应该看到的是我们输入的

99

行移到了表的顶部（正如它所做的那样），替换我们编辑的前一个位置的行的新行应该具有与该新行关联的数据（而不是

99

）

我似乎找不到一种方法来强迫它更新，甚至找不到一个简陋的黑客来以不可取的方式实现我想要的。希望有人能帮忙

编辑：此图显示上述说明步骤2之后的显示。

---

问题是您正在热计算表的值

full

，并根据该

full

属性对表进行排序。为了解决你的问题，你可以

1） 不要根据

完整的
对表进行排序

像这样

defaultSorted={[
  {
    id: "firstName",
    desc: true
  }
]}

this.state = {
  data: makeData().map(item => ({ ...item, full: item.age * 2 }))
};

{
  Header: "full",
  id: "full",
  accessor: "full",
}

2） 避免热计算您的
full
，并在构造函数中只计算一次

像这样的

this.state = {
  data: makeData().map(item => ({ ...item, full: item.age * 2 }))
};

{
  Header: "full",
  id: "full",
  accessor: "full",
}

你的头球是这样的

this.state = {
  data: makeData().map(item => ({ ...item, full: item.age * 2 }))
};

{
  Header: "full",
  id: "full",
  accessor: "full",
}

对于那些在这方面苦苦挣扎的人，在我们等待修复的同时，我找到了一个解决办法

根据原始问题中的示例，将
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>
  );
}

renderEditable（cellInfo）{
返回(
{
const data=[…this.state.data]；
data[cellInfo.index][cellInfo.column.id]=e.target.innerHTML；
数据[cellInfo.index].full=数据[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]}
);
}

onBlur
事件在表自身重新排序之前触发，因此如果我们只是获取该值，将其放在一边，并在使用
setState
触发resort之前将
innerHTML
重置为原始值，我们最终会显示正确的值。虽然不太理想，但很管用。不要忘记验证输入。
我已经更新了codesandbox以反映您的建议，它可以更好地以这种方式突出问题。当然，简单地不排序可以避免这个问题（或者不允许编辑数据），但它不能解决这个问题，不幸的是，用例需要对计算列进行排序。我不清楚您实际需要什么！假设我编辑第三行->这应该同时改变年龄和完整年龄，是吗？如果两者都发生了变化，它将自行调整，以便我们刚刚编辑的内容进入表格的最顶端。在这种情况下，其他一切都保持相同的顺序。除了我们偏离航线编辑的那一行。那么您需要的实际需求是什么呢？是的，这是正确的，它会正确地重新排序，但是您键入的输入不会更新为包含
值中传递的数据。因此，第一行显示
age=99
，第三行显示
age
单元格仍然显示
99
，此时新记录中的数据现在占据了顺序中的第三位。当与默认排序一起使用时，似乎存在可编辑反应表的错误。你可以向GitYeah的开发人员报告这一点，不久前提出了一个问题-希望有人能有一个聪明的方法来暴力更新它或某种解决方法。谢谢你的努力！