对 react-data-grid 有效的 onBlur答案

【问题标题】：Effective onBlur for react-data-grid对 react-data-grid 有效的 onBlur
【发布时间】：2016-11-30 23:02:45
【问题描述】：

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

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

这是我尝试过的：

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

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

【问题讨论】：

event.target 应该有对输入的引用吗？

标签： javascript reactjs react-data-grid

【解决方案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);

【讨论】：