Как я могу использовать 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 проп / функция использовать 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);
    }}
    />