2

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 の状態です。

スクリーンショット 2019-04-04 at 2 32 27 PM

コンソール ログオンの最初の行をクリックします。

スクリーンショット 2019-04-04 at 2 32 46 PM

UI 1 つのチェックボックスを選択した後 (別の行のチェックボックスを直接クリック):

スクリーンショット 2019-04-04 at 2 34 32 PM

最初の行をもう一度クリックした後のコンソール ログ:

スクリーンショット 2019-04-04 at 2 35 23 PM

状態がプログラムによって更新されたときに、何もリセットせずに MaterialTable コンポーネントの UI を確実に更新する方法はありますcheckedか?

また、tableRef.onRowSelected が正常に動作するようになりましたが、行のチェックボックスが選択された状態で UI が再レンダリングされません。

ここに、私が試みた修正を含むコードサンドボックスがあります

4

1 に答える 1

4

公式の material-table Gitter チャットで @orestes22 の助けを借りて、これを考え出しました。

状態に tableRef を追加します。

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

次に、マテリアル テーブルに tableRef prop を追加します。

<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);
    }}
    />
于 2019-05-23T20:03:09.103 に答える