2

私はreact-data-grid、編集可能なデータの束を表示するために使用しているかなり大きな React JS プロジェクトに飛び込んでいます。現在、サーバーに変更を送信するには、[更新] ボタンをクリックする必要があります。私の仕事は、次のような自動保存機能を作成することです。

  1. ユーザーがセルを選択してテキストを編集
  2. ユーザーがテキストを変更
  3. ユーザーは別のセルに移動するか、データグリッドから離れてクリックします
  4. 変更はサーバーに永続化されます

これが私が試したことです：

  1. onBlur各列のイベント。イベントは発生しますが、イベントはdiv基になるinputコントロールではなくに関連付けられているようです。したがって、このイベントが発生した時点ではセルの値にアクセスできません。
  2. onCellDeselected<ReactDataGrid>コンポーネント自体に。このメソッドはレンダリング時にすぐに起動され、その後別のセルに移動するときにのみ起動されるようです。最後のセルを編集していて、クリックしてデータ グリッドから離れた場合、このコールバックは発生しません。

を使用しreact-data-gridて、ユーザーが編集を終了したときに編集可能なセルのコンテンツに効果的にアクセスするにはどうすればよいですか?

4

1 に答える 1

2

コミットはEditorContainerreact-data-gridによって処理されます。コミット ロジックは単純です。エディターは、次の場合に値をコミットします。

  • エディタがアンマウントします
  • エンターが押された
  • タブが押された
  • 場合によっては、矢印が押されたとき (この部分はスキップしますが、必要ない場合があります。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 に答える