状态阵列内单元的反应处理修改

Question

我正在创建fixed-data-table-2 (npm)的实现，其中一个编辑按钮将单元格更改为输入单元格，该单元格可以被编辑，然后保存(post)。

​

​

但有个大问题..。输入太慢了，因为每次在单元格上触发onChange时，我都会更新整个数组(处于状态)。

事件处理程序(表)

import reactUpdate from "react/lib/update";
onChangeEditableCell(field, rowIndex, newValue) {
    const data = reactUpdate(this.state.data, {[rowIndex]: {[field]: {$set: newValue}}})
    this.setState({data : data});
}

事件处理程序(单元)

onChange(e) {
    e.preventDefault();
    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;

    return (
        <Cell {...props}>
            {editMode ? <input onChange={this.onChange} className="text-cell-edit" type="text" value={this.getCell()} /> : data[rowIndex][field]}
        </Cell>
    );
}

这显然是个坏主意..。我怎样才能达到同样的目标，但性能方面呢？

Note

onHandleInput (单元格支柱)是onChangeEditableCell (表的函数)

PS

我需要data数组在用户点击Save时发布整个对象

Answer 1

在这种情况下，我所做的就是让单元格有自己的状态，用每个按键更新。然后用onblur事件更新表级状态，该事件在输入失去焦点后触发。

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

Answer 2

尝试添加一些超时：

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);

}