如何使用 tableRef.onRowSelected 通过 onRowClick 属性更新 UI？

Question

我编写了一个函数，用于在单击行时onRowClick更改行值，如此处的答案＃300所示tableData.checked

我可以在控制台日志中看到选中状态的更新，但在我实际单击另一个行复选框之前，复选框本身不会发生明显变化。然后它将显示所有已tableData.checked更新其值的复选框。我希望能够让复选框在 RowClick 上实际向用户显示此更改。

这是我当前的代码：

<MaterialTable
          onRowClick={(event, rowData) => {
            console.log(event.target, rowData);
            console.log(
              "Row Selection State Before: " + rowData.tableData.checked
            );
            rowData.tableData.checked = !rowData.tableData.checked;
            console.log(
              "Row Section State After: " + rowData.tableData.checked
            );
          }}
         options={{ selection: true}}
/>

这是我单击第一行时的 UI 状态：

控制台登录第一行单击：

UI 选择一个复选框后（直接单击另一行的复选框）：

再次单击初始行后的控制台日志：

checked当以编程方式更新状态时，有什么方法可以确保 MaterialTable 组件的 UI 更新而无需重置任何内容？

我也让 tableRef.onRowSelected 正常工作，但 UI 仍然不会在选中行复选框的情况下重新渲染。

这是我尝试过的修复的代码和框

Answer 1

在官方材料表 Gitter 聊天中 @orestes22 的帮助下解决了这个问题。

将 tableRef 添加到状态：

state = {
  tableRef: React.createRef(),
}

然后将 tableRef 属性添加到您的材质表中

<MaterialTable
    tableRef={this.state.tableRef}
    />

然后在onRowClickprop/function 上使用 tableRef 来访问dataManager和onSelectionChange

<MaterialTable
    tableRef={this.state.tableRef}
    onRowClick={(event, rowData) => {
        // Update the clicked rows checked state
        rowData.tableData.checked = !rowData.tableData.checked;

        // pass dataManager the current rows checked state and path/ID, the path/ID needs to be an array, ex: [1]
        this.state.tableRef.current.dataManager.changeRowSelected(
           rowData.tableData.checked,
           [rowData.tableData.id]
        );

        // call the onSelectionChange and pass it the row selected to ensure it updates your selection properly for any custom onSelectionChange functions.
        this.state.tableRef.current.onSelectionChange(rowData);
    }}
    />