How can I use tableRef.onRowSelected to update the UI via the onRowClick property?

六月ゝ 毕业季﹏ 提交于 2020-06-27 17:22:33

问题


I've written an onRowClick function to change the rows tableData.checked value when the row is click as seen in the answer here #300

I can see the checked state updating in a console log but the checkbox itself does not change visibly until I actually click another rows checkbox. It will then show all the checkboxes that had their tableData.checked values updated. I'd like to be able to have the checkbox actually display this change to the user onRowClick.

Here is my current code:

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

This is the state of the UI on my first row click:

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

Console Log on first row click:

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

UI After selecting one checkbox (clicking directly on the checkbox of another row):

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

Console Log after clicking the initial row again:

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

Is there any way to make sure the UI updates for the MaterialTable component without resetting anything when the checked state is updated programmatically?

I've also gotten tableRef.onRowSelected working properly but the UI still doesn't re-render with the rows checkbox selected.

Here is the codesandbox with the fix I've attempted


回答1:


Figured this one out with some help from @orestes22 in the official material-table Gitter chat.

Add tableRef to state:

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

Then add the tableRef prop to your Material Table

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

Then on the onRowClick prop/function use tableRef to access dataManager and 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);
    }}
    />


来源:https://stackoverflow.com/questions/56264459/how-can-i-use-tableref-onrowselected-to-update-the-ui-via-the-onrowclick-propert

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!