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（テーブルの機能）である

PS

ユーザーが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); 

}