0

我是 ReactJS 的新手，我正在尝试使用 React Data Grid。当我过滤我的表格，对单元格进行更改，然后取消过滤表格时，更改将恢复为之前的值。如果我改变 const rows = this.state.rows.slice(0); 到 const rows = Selectors.getRows(this.state); 我的更改仍然存在，但是我无法取消过滤表。

这是我处理要更新的网格行的方式：

  handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    const rows = this.state.rows.slice(0);
    // const rows = Selectors.getRows(this.state);
    
    for (let i = fromRow; i <= toRow; i++) {
      const rowToUpdate = rows[i];
      const updatedRow = update(rowToUpdate, { $merge: updated });
      rows[i] = updatedRow;
      if (!rows[i].Date) {
        const index = this.state.counter;
        newRows[index] = rows[i];
        this.handleUpdate(rows[i]);
        this.setState({ newRows });
      } else {
        updatedRows[rows[i].Date] = rows[i];
        this.handleUpdate(rows[i]);
        this.setState({ updatedRows });
      }
    }
    this.setState({ originalRows: rows });
  };

我查看了 RDG 文档和示例。在他们的过滤器示例中，他们不允许您编辑单元格。

提前致谢！

4

2 回答 2

0

我想出了一个解决方案，我使用了 npm 库 Lodash 和他们的函数 _.unionBy。

此解决方案将更新后的 rows 数组与原始状态的 rows 数组在每个对象的 SN 键上合并到一个变量中，然后使用结果设置状态：

 handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    const rows = Selectors.getRows(this.state);
    const rowsTwo = Object.assign([], this.state.rows);
    
    for (let i = fromRow; i <= toRow; i++) {
      const rowToUpdate = rows[i];
      const updatedRow = update(rowToUpdate, { $merge: updated });
      rows[i] = updatedRow;
      if (!rows[i].Date) {
        const index = this.state.counter;
        newRows[index] = rows[i];
        this.handleUpdate(rows[i]);
        this.setState({ newRows });
      } else {
        updatedRows[i] = rows[i];
        this.handleUpdate(rows[i]);
      }
    }
    const result = _.unionBy(updatedRows, rowsTwo, 'SN');
    
    this.setState({ rows: result });
  };

于 2018-10-11T15:27:22.690 回答
0

状态是不可变的，在您需要制作副本然后对其进行操作之前，保持对数据进行切片是一个坏主意，因此您可以这样做

const rows = Object.assign([],this.state.rows)

顺便说一句，一个活生生的例子或你在行上持有的数据类型将是一个很大的帮助

于 2018-10-10T15:53:46.907 回答