Javascript React-处理单元内部状态的修改'；s数组

我正在创建我的

fixed-data-table-2

（npm）实现，其中一个编辑按钮将单元格更改为输入，可以编辑并保存（post）

但是有一个大问题。。。 键入速度太慢，因为每次在单元格上触发

onChange

时，我都会更新整个数组（处于状态）

事件处理程序（表）

事件处理程序（单元）

onChange（e）{
e、 预防默认值（）；
const newValue=e.target.value；
this.props.onHandleInput（this.props.field，this.props.rowIndex，newValue）；
}
render（）{
const{rowIndex，field，data，editMode，onHandleInput，…props}=this.props；
返回(
{editMode？：数据[rowIndex][field]}
);
}

这显然是个坏主意。。。我如何才能达到同样的效果

注意

onHandleInput

（单元格的属性）是

onChangeEditableCell

（表的函数）

PS

---

我需要

数据

数组在用户点击

保存

时发布整个对象，尝试添加一些超时：

onChange(e) {
  e.preventDefault();
  const newValue = e.target.value;
  if (this.timeout) {
    clearTimeout(this.timeout);
    this.timeout = 0;
  }
  this.timeout = setTimeout(()=> {
    this.props.onHandleInput(this.props.field, this.props.rowIndex, newValue);
  }, 1000);

}

---

尝试添加一些超时：

onChange(e) {
  e.preventDefault();
  const newValue = e.target.value;
  if (this.timeout) {
    clearTimeout(this.timeout);
    this.timeout = 0;
  }
  this.timeout = setTimeout(()=> {
    this.props.onHandleInput(this.props.field, this.props.rowIndex, newValue);
  }, 1000);

}

---

在这种情况下，我要做的是使单元格有自己的状态，随着每次按键而更新。然后使用

onblur

事件更新表级状态，该事件在输入失去焦点后触发

---

在我看来，单个输入是向上拉动状态的一般做法的一个很好的例外。

在这种情况下，我要做的是使单元格有自己的状态，并随着每次按键而更新。然后使用

onblur

事件更新表级状态，该事件在输入失去焦点后触发

---

在我看来，个人输入是向上拉状态的一般做法的一个很好的例外。

也许我没有遵循，但与其在“编辑模式”期间直接修改状态，不如修改状态的副本，当用户点击“保存”时只需替换整个对象，或者深度合并两个状态？在状态之外创建变量是一种好的做法吗？如果是这样的话，我将研究如何做到这一点。这似乎是一个更好的主意。我不是100%确定-但将状态更改流式传输并在每次击键时强制重新呈现不必要的组件似乎是过度的（而且“危险的”）。是的，表级状态不应该在每次按键时都改变。这种东西应该生活在细胞水平的状态。然后，只有当按下save按钮时，表级状态才会更新。我想到了这一点，但我总是在写关于“哑”和“无状态”组件的文章，我几乎总是尝试这样做。但是关于“单元级”状态，当点击

保存

时，我将如何更新表的状态？也许我没有跟随，但不是在“编辑模式”期间直接修改状态，为什么不修改状态的副本，当用户点击“保存”时只需替换整个对象，或者深度合并两个状态？在状态之外创建变量是一种好的做法吗？如果是这样的话，我将研究如何做到这一点。这似乎是一个更好的主意。我不是100%确定-但将状态更改流式传输并在每次击键时强制重新呈现不必要的组件似乎是过度的（而且“危险的”）。是的，表级状态不应该在每次按键时都改变。这种东西应该生活在细胞水平的状态。然后，只有当按下save按钮时，表级状态才会更新。我想到了这一点，但我总是在写关于“哑”和“无状态”组件的文章，我几乎总是尝试这样做。但是关于“单元级”状态，当

保存

被命中时，我如何更新表的状态呢？我试过了，效果很好。我等着看是否有人有更好的主意。但这很合适。我试过了，效果很好。我等着看是否有人有更好的主意。但这很合适。

onChange(e) {
  e.preventDefault();
  const newValue = e.target.value;
  if (this.timeout) {
    clearTimeout(this.timeout);
    this.timeout = 0;
  }
  this.timeout = setTimeout(()=> {
    this.props.onHandleInput(this.props.field, this.props.rowIndex, newValue);
  }, 1000);

}