如何将Redux-form与Addazle react-data-grid

时间:2017-06-19 21:26:29

标签: reactjs redux-form react-data-grid

如何将来自Adazzle data grid的网格嵌入到基于Redux-Form的反应组件中?

我有一个使用单元格编辑的数据网格。 Adazzle网格使用行的状态变量和一些存取方法来呈现数据。它有一个更新行的处理程序。这是我采用的一种方法,用于将表单数据与网格中的更改同步。问题是在更改handleGridRowsUpdated中的表单值后,pristine标志未设置为false。

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-form填充行。基于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;
}

我还在考虑使用一个隐藏的表单控件,可能只是他更新了网格,以便只将网格中更改的值传递回服务器。

0 个答案:

没有答案