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

Question

我编写了一个onRowClick函数，在单击行时更改行tableData.checked值，如这里的答案#300所示

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

以下是我的当前代码：

<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 (直接单击另一行的复选框)：

​

​

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

​

​

在以编程方式更新MaterialTable状态时，是否有任何方法确保checked组件的UI更新而不重置任何内容？

我还让tableRef.onRowSelected正常工作，但是UI仍然没有重新呈现选中的行复选框。

下面是我尝试修复的代码框

Answer 1

在官方资料表Gitter聊天中，@orestes22 22找到了这个答案。

将tableRef添加到以下状态：

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

然后将tableRef支柱添加到材料表中

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

然后在onRowClick道具/函数上使用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);
    }}
    />