Как я могу использовать tableRef.onRowSelected для обновления пользовательского интерфейса через свойство onRowClick?

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

Это состояние пользовательского интерфейса в моем первом щелчке строки:

Журнал консоли при нажатии первой строки:

Пользовательский интерфейс После выбора одного флажка (щелкнув непосредственно на флажок другого ряда):

Журнал консоли после повторного щелчка по начальной строке:

Есть ли способ убедиться, что пользовательский интерфейс обновляется для компонента MaterialTable, ничего не сбрасывая при программном обновлении состояния checked?

Я также получил правильную работу tableRef.onRowSelected, но пользовательский интерфейс все еще не рендерится с установленным флажком строк.

Вот коды и поле с исправлением, которое я пытался исправить

Answer 1

Выяснил это с помощью @ orestes22 в официальном чате Gitter с таблицей материалов.

Добавить tableRef в состояние:

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

Затем добавьте опору tableRef в таблицу материалов

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

Затем в onRowClick prop / 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);
    }}
    />