ag-grid + react: checkboxSelection 不更新状态

Question

const columnsTaenzer = [{
    headerName: "Any name",
    field: "yesno",
    checkboxSelection: (params: any) => {
        return (state.booleanValue) ? true : false;
    }
}, ...

我想根据状态值的值显示复选框。

第一次呈现“booleanValue”时为假。但是当我更改布尔值的状态时，checkboxSelection 无法识别更改。

在 ag-grid 的 checkboxSelection 函数中，state.booleanValue 始终为 false。此外，当我将 valueCache 设置为 false 并使用 force 参数调用 refreshCells() 时，checkboxSelection 函数的 state.booleanValue 始终为 false。

如何告诉 ag-grid 状态值已更改？

<AgGridReact
    rowHeight={50}
    rowSelection={'multiple'}
    rowDeselection={true}
    columnDefs={columnsTaenzer}
    onSelectionChanged={onSelectionChanged}
    onFirstDataRendered={autoSizeAll}
    rowData={state.tabledata}
    onGridReady={onGridReady}>
</AgGridReact>

//解决方案（更新 - 不起作用）

也许不是正确的，但它有效。 使用上下文： Ag-grid Context 这些参数与 redrawRows() 结合使用。只有 redrawRows() 会触发“checkboxSelection”。如果您只想触发 valueGetter，请使用 refreshCells({force: true})

现在的问题：

如果你调用redrawRows，它会更新表格（很棒），但最迟会更新上下文。

这意味着它将使用旧上下文更新每个单元格

Answer 1

这是满足您要求的工作插件（使用状态更新更新 checkboxSelection）： https://embed.plnkr.co/plunk/e5sKiz13v93Gg1oV

您可以使用上下文来传递布尔值。 我试着做你想要达到的目标，它似乎正在工作。 AgGrid 正在获取上下文的最新值。也许您的代码实现存在一些问题。有关工作代码，请参见上面的 plunkr。我通过扩展代码创建它 - https://www.ag-grid.com/javascript-grid-selection/#example-multiple-row-selection

你要做的是，当你点击“切换复选框”时，你可以做任何一个

          onClick={() => {
            this.setState(p => {
              this.gridOptions.context = !p.isCheckboxShown; //set opposite value as of state before state is updated
              this.gridApi.redrawRows();
              return { isCheckboxShown: !p.isCheckboxShown };
            });
          }}

或

         onClick={() => {
            this.setState(
              p => {
                return { isCheckboxShown: !p.isCheckboxShown };
              },
              () => {
                this.gridOptions.context = this.state.isCheckboxShown;  //set same value as of state after state is updated
                this.gridApi.redrawRows();
              }
            );
          }}

另外，您可能还想设置suppressRowClickSelection={true}。如果为真，则单击行时不会发生行选择。当您只需要复选框选择时使用。