EffectiveBlur for react-data-grid

Question

我在使用react-data-grid顯示大量可編輯數據的一個非常大的React JS項目中跳躍。現在，您必須單擊更新按鈕才能將更改發送到服務器。我手頭的任務是創造像這樣的自動保存功能：

1. 用戶選擇單元格編輯文本
2. 用戶更改文本
3. 用戶或者移動到另一個小區或從數據網格點擊了
4. 的更改保存到服務器

這是我已經試過：

1. onBlur每個列上的事件。該事件將觸發，但似乎事件附加到div而不是基礎input控件。因此，在此事件發生時，我無法訪問單元格的值。
2. onCellDeselected上<ReactDataGrid>組件本身。看起來這個方法在渲染時立即被觸發，並且當它移動到另一個單元時，它只會被觸發。如果我正在編輯最後一個單元格並單擊數據網格，則不會觸發此回調。

使用react-data-grid，當用戶完成編輯後，如何有效地訪問可編輯單元格的內容？

Answer 1

react-data-grid上的提交由EditorContainer處理。提交邏輯很簡單。一位編輯提交當值：

• 編輯卸除
• 按下回車鍵
• Tab鍵被按下
• 在某些情況下，當按下箭頭（將跳過這一部分是它可能沒有必要對你來說，你可以看看基於

的方式，我會建議做自動保存在EditorContainer邏輯此）是：

創建一個EditorWrapper（HOC），您希望自動編輯節省

const editorWrapper(WrappedEditor) => { 
    return class EditorWrapper extends Component { 
     constructor(props) { 
      base(props); 
      this._changeCommitted = false; 
      this.handleKeyDown.bind(this); 
     } 

     handleKeyDown({ key, stopPropagation }) { 
      if (key === 'Tab' || key === 'Enter') { 
      stopPropagation(); 
      this.save(); 
      this.props.onCommit({ key }); 
      this._changeCommitted = true; 
      } 
      // If you need the logic for the arrows too, check the editorContainer 
     } 

     save() { 
      // Save logic. 
     } 

     hasEscapeBeenPressed() { 
      let pressed = false; 
      let escapeKey = 27; 
      if (window.event) { 
      if (window.event.keyCode === escapeKey) { 
       pressed = true; 
      } else if (window.event.which === escapeKey) { 
       pressed = true; 
      } 
      } 
      return pressed; 
     } 

     componentWillUnmount() { 
      if (!this._changeCommitted && !this.hasEscapeBeenPressed()) { 
      this.save(); 
      } 
     } 

     render() { 
      return (
      <div onKeyDown={this.handleKeyDown}> 
       <WrappedComponent {...this.props} /> 
      </div>); 
     } 
    } 
} 

被關在導出您編輯只是包裝他們與EditorWrapper

const Editor = ({ name }) => <div>{ name }</div> 

export default EditorWrapper(Editor);