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

时间:2019-05-22 20:22:20

标签: material-table

我编写了一个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的状态:

Screen Shot 2019-04-04 at 2 32 27 PM

控制台登录第一行,单击:

Screen Shot 2019-04-04 at 2 32 46 PM

用户界面选中一个复选框(直接在另一行的复选框上单击)后:

Screen Shot 2019-04-04 at 2 34 32 PM

控制台再次单击第一行后登录:

Screen Shot 2019-04-04 at 2 35 23 PM

通过编程方式更新checked状态时,是否有任何方法可以确保对MaterialTable组件进行UI更新而不重置任何内容?

我还获得了tableRef.onRowSelected正常运行的功能,但UI仍未在选中“行”复选框的情况下重新呈现。

Here is the codesandbox with the fix I've attempted

1 个答案:

答案 0 :(得分:1)

在官方材料表Gitter聊天室中@ orestes22的帮助下找到了这个。

添加表格参考状态:

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

然后将tableRef道具添加到材质表

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

然后在onRowClick道具/功能上使用tableRef访问dataManageronSelectionChange

<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);
    }}
    />