javascript - 对 react-data-grid 有效的 onBlur

Question

我正在参与一个相当大的 React JS 项目，该项目正在使用 react-data-grid显示一堆可编辑的数据。现在，您必须单击“更新”按钮才能将更改发送到服务器。我手头的任务是像这样创建自动保存功能:

1. 用户选择要编辑文本的单元格
2. 用户更改文本
3. 用户要么移动到另一个单元格，要么点击远离数据网格
4. 更改保存到服务器

这是我尝试过的:

1. onBlur每列上的事件。该事件将触发，但似乎该事件已附加到 div而不是基础 input控制。因此，在触发此事件时我无权访问单元格的值。
2. onCellDeselected在 <ReactDataGrid> 上组件本身。看起来这个方法在渲染时立即被触发，并且它只会在移动到另一个单元格时被触发。如果我正在编辑最后一个单元格并点击远离数据网格，则不会触发此回调。

使用 react-data-grid ，当用户完成编辑时，我如何才能有效地访问可编辑单元格的内容？

Answer 1

react-data-grid 上的提交由 EditorContainer 处理.提交逻辑很简单。编辑器在以下情况下提交一个值:

• 编辑器卸载
• Enter 被按下
• 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);