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

我創建了我的fixed-data-table-2（npm）實現，其中編輯按鈕將單元格更改爲輸入，它可以被編輯然後保存（後）。React-處理狀態數組內的單元格修改

但是有一個大問題...... 它太慢了打字，因爲我更新整個陣列（狀態），其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（表的功能）

我需要data陣列當用戶點擊Save

張貼整個對象

來源

2017-03-17 Leandro Soares

也許我沒有關注，而是直接在「編輯模式」期間修改狀態，爲什麼不修改狀態的副本，並且當用戶點擊「保存」時，只需更換整個對象 - 或者將兩個國家進行深度合併？ –

在狀態之外創建變量是否是一種好的做法？如果是這樣的話，我會去搜索如何去做。這似乎是一個更好的主意。 –

我不是100％肯定 - 但它似乎過多（和「危險」）將更改傳輸到狀態，並強制每次擊鍵時重新呈現不必要的組件。 –

我在這種情況下做的是讓cell有自己的狀態，每次按鍵都會更新。然後使用onblur事件更新表級別的狀態，該事件在輸入失去焦點後觸發。

在我看來，個人投入是拉動國家向上的一般做法的良好例外。

來源

2017-03-17 18:48:13 Cerisa

這似乎是一個好方法，但它感覺有點冒險 –

嗯，我試了一下，它工作得很好。我會等待看看有人有更好的主意。但這很適合。 –

嘗試添加一些超時：

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

}

來源

2017-03-17 17:01:34 blackmiaool

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

回答

相關問題