Javascript react数据网格的有效onBlur

我正在参与一个相当大的React JS项目，它使用

React数据网格

来显示一组可编辑的数据。现在，您必须单击更新按钮将更改发送到服务器。我手头的任务是创建自动保存功能，如下所示：

用户选择要编辑文本的单元格

用户更改文本

用户可以移动到另一个单元格，也可以单击离开数据网格

更改将持久化到服务器

以下是我尝试过的：

onBlur

每列上的事件。事件将触发，但似乎该事件已附加到

div

而不是基础

输入

控件。因此，在触发此事件时，我无法访问单元格的值

取消选择
组件本身上的
oncell。这种方法似乎是在渲染时立即触发的，并且只有在移动到另一个单元格时才会在后续时间触发。如果我正在编辑最后一个单元格，并单击远离数据网格的位置，则不会触发此回调

---

使用

react数据网格

，当用户完成编辑时，如何有效地访问可编辑单元格的内容？

react数据网格上的提交由。提交逻辑很简单。编辑器在以下情况下提交值：

• 编辑卸载
• 按下回车键
• 按Tab键
• 在某些情况下，当按下箭头时（如果您可能不需要，将跳过此部分，您可以在EditorContainer上查看此部分的逻辑）

基于此，我建议执行自动保存的方式是：

在要启用自动保存的编辑器中创建一个编辑器包装器（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>);
       }
    }
}

const editorWrapper（WrappedEditor）=>{
返回类EditorWrapper扩展组件{
建造师（道具）{
底座（道具）；
这是.\u changeCommitted=false；
这个.handleKeyDown.bind（这个）；
}
handleKeyDown（{key，stopPropagation}）{
如果（键=='Tab'| |键=='Enter'）{
停止传播（）；
这是save（）；
this.props.onCommit（{key}）；
这是.\u changeCommitted=true；
}
//如果还需要箭头的逻辑，请检查编辑器容器
}
保存（）{
//保存逻辑。
}
hasescapeenpressed（）{
设为假；
设escapeKey=27；
if（window.event）{
if（window.event.keyCode===转义键）{
按下=真；
}else if（window.event.which===escapeKey）{
按下=真；
} 
}
返回按下；
}
组件将卸载（）{
如果（！this.\u changeCommitted&&！this.haseEscapeBeenPressed（））{
这是save（）；
}
}
render（）{
返回(
);
}
}
}

导出编辑器时，只需使用EditorWrapper对其进行包装

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

export default EditorWrapper(Editor);

const编辑器=（{name}）=>{name}
导出默认EditorWrapper（编辑器）；

事件。目标

应该有输入的引用吗？