reactjs - Redux フォームを Addazle の react-data-grid と統合する方法

Question

Adazzle データ グリッドのグリッドをRedux-Formベースの反応コンポーネントに埋め込むにはどうすればよいですか?

セル編集を使用するデータ グリッドがあります。Adazzle グリッドは、行の状態変数といくつかのアクセサー メソッドを使用してデータをレンダリングします。行を更新するためのハンドラがあります。これは、フォーム データをグリッドからの変更と同期するために取ったアプローチです。問題は、 でフォームの値を変更した後、pristine フラグが false に設定されないことですhandleGridRowsUpdated。

handleGridRowsUpdated({fromRow, toRow, updated}) {
let rows = this
  .state
  .rows
  .slice();

for (let i = fromRow; i <= toRow; i++) {

  //update the data-grid
  let rowToUpdate = rows[i];
  let updatedRow = {
    ...rowToUpdate,
    ...updated
  };
  rows[i] = updatedRow;

  //update the underlying redux-form values
  let entity = this.props.input.value[i]
  this.props.input.value[i] = {...entity, ...updated}
}

this.setState({rows});
}

また、Redux フォームから行を作成する方法を次に示します。Redux フォーム ベースのコンポーネントは、react-data-grid をラップする別のコンポーネントを消費します。

constructor(props) {
 super(props)

 this.state = {
   rows: [],
   filters: {},
   sortColumn: null,
   sortDirection: null,
   selectedIndexes: []
 }

 const {input: {
    value
  }} = props;

 this.state.rows = value;
}

グリッドからの変更された値のみがサーバーに返されるように、おそらく彼がグリッドを更新するだけの非表示のフォームコントロールを使用することも考えていました。