2

我正在加入一个相当大的 React JS 项目，该项目react-data-grid用于显示一堆可编辑的数据。现在，您必须单击更新按钮才能将更改发送到服务器。我手头的任务是创建自动保存功能，如下所示：

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

这是我尝试过的：

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

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

4

1 回答 1

2

提交react-data-grid由EditorContainer处理。提交逻辑很简单。编辑器在以下情况下提交值：

  • 编辑器卸载
  • 输入被按下
  • 选项卡被按下
  • 在某些情况下，当按下箭头时（将跳过这部分，您可能不需要，您可以在 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);
于 2017-01-11T10:08:40.037 回答