2

マテリアル テーブル ライブラリの使用。この例に示されている動作を再現したいと思います。

https://codesandbox.io/s/table-hover-colors-zw9nt

https://www.npmjs.com/package/material-table https://material-table.com/#/ ここに画像の説明を入力

onRowClick={} を使用することを考えていました

ロジックは

onRowClick =>

  1. クリックされた行の背景を別の色にレンダリングするコンポーネント状態の値を設定します
  2. 他のすべての行を背景に元の色に設定します

状態に保持されている値に基づいて条件付きレンダリングを使用して、背景を変更できます。これはすべての行の背景を変更しますが。

options={
   rowStyle:{backgroundColor: this.state.selected ? '#fff' : this.state.c}
}

ここに画像の説明を入力

私の現在の作業例はこちら https://codesandbox.io/s/peaceful-haibt-2nefw

ご協力いただきありがとうございます

4

2 に答える 2

6

また、渡す必要がありますselectedRowId。そうしないと、すべてが青色になります。また、rowStyleオプションは次のように呼び出すことができるコールバックを受け入れます。

rowStyle: rowData => ({
backgroundColor: this.state.selected && rowData.tableData.id === this.state.selectedRowId 
?   this.state.c
    : "#fff" 
})

onRowClickまた、いくつかの作業が必要です（選択/選択解除の条件が正しくありませんでした） 。https://codesandbox.io/embed/select-one-row-160vm

于 2019-09-29T23:49:21.387 に答える
1

パッケージのドキュメントoptionsには、 propを使用してこれを実現する方法の例が示されています。

ここでサンドボックスをフォークしました。

于 2019-09-29T23:47:34.870 に答える