1

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

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

我设置了 deltaRowDataMode 'on' 这使得网格移动/更新/删除速度更快，我也有动态列（通过 redux 存储和 api 调用生成）和基于数据的单元格，这工作正常......直到我尝试校准我的复选框的价值。例如，默认情况下它看起来像这样，如果我有这个权限'administrator.assign.privileges'

在此处输入图像描述

但是，当我选中下一个框时，我的所有数据都会更新，而不会更新，但不会选中我的复选框。

在此处输入图像描述

如您所见，数据正在传递，并在那里检查下一个状态。但是，未选中第 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;
4

0 回答 0