React-處理狀態數組內部單元格的修改

Question

我正在創建fixed-data-table-2 （npm）的實現，其中的編輯按鈕會將單元格更改為輸入的單元格，然后可以對其進行編輯然后保存（發布）。

但是有一個主要問題...輸入速度太慢，因為每次在單元格上觸發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>
    );
}

這顯然是一個壞主意...我如何才能達到相同的效果，但在性能方面呢？

注意

onHandleInput （單元格的道具）是onChangeEditableCell （表的函數）

聚苯乙烯

當用戶點擊“ Save時，我需要data數組來發布整個對象

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

}