如何将来自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;
}
我还在考虑使用一个隐藏的表单控件,可能只是他更新了网格,以便只将网格中更改的值传递回服务器。