Question

还有另一个关于aggrid的问题，我似乎无法弄清楚如何以最佳方式更新复选框表。

我可以关闭deltaRowDataMode并且一切运行良好，但它渲染整个网格，我只是不喜欢忽略性能的想法。（因为我有成千上万的用户）。

我设置deltaRowDataMode＆＃39; on＆＃39;这使得网格移动/更新/删除速度快，我还有动态列（通过redux存储和api调用生成）和基于数据的单元格，这是正常工作...直到我尝试校准我的复选框的值。例如，默认情况下，如果我拥有此权限，那么它将如下所示＆＃39; administrator.assign.privileges＆＃39;

但是，当我检查下一个方框时，我的所有数据都会更新，但不会更新，但我的复选框不会被检查。

正如您所看到的那样，数据正在传递，并检查下一个状态。但是没有检查第4个框。但是当我在那之后检查另一个方框时，那么在“检查”之前的方框中。这让我相信我落后于我的状态，我还需要另一个渲染更新，最佳方法是什么？

这是我的cellRendererFramework组件：

import React, { Component } from 'react';
import Checkbox from 'material-ui/Checkbox';
import _ from 'lodash';

class CheckboxRenderer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: false,
        };
        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    }

    componentDidMount() {
      this.setDefaultState();
    }

    setDefaultState() {
      const { data, colDef } = this.props;
      if (data.Roles && data.Roles.length > 0) {
        if (_.find(data.Roles, _.matchesProperty('name', colDef.headerName))) {
          this.setState({
            value: true,
          });
        }
      } else if (data.Privileges && data.Privileges.length > 0) {
        console.log(data.Privileges);
        if (_.find(data.Privileges, _.matchesProperty('name', colDef.headerName))) {
          this.setState({
            value: true,
          });
        }
      }
    }

    handleCheckboxChange(event) {
      const { data, colDef } = this.props;
      const { externalData } = this.props.api;
      const newVal = !this.state.value;
      if (newVal) {
        if (this.props.api.mode === 'Privilege') {
          this.props.api.handleAssign(data.id, colDef.id, externalData.entities.Privilege[colDef.id]);
        } else {
          this.props.api.handleAssign(data.id, colDef.id, externalData.entities.Role[colDef.id]);
        }
      } else {
        this.props.api.handleUnassign(data.id, colDef.id);
      }
        this.setState({value: newVal});
    }

    render() {
      return (
        <Checkbox
            checked={this.state.value}
            onChange={this.handleCheckboxChange} />
      );
    }
}

export default CheckboxRenderer;

React Redux和aggrid重新绑定数据

0 个答案: