材料表如何选择一行在选择时更改背景颜色答案

【问题标题】：material-table How do I select a row changing the background color upon selection材料表如何选择一行在选择时更改背景颜色
【发布时间】：2020-01-29 06:45:42
【问题描述】：

使用材料表库。我想复制此示例中显示的行为。

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

https://www.npmjs.com/package/material-table https://material-table.com/#/

我正在考虑使用 onRowClick={}

逻辑是

onRowClick =>

在组件状态中设置值，将点击的行背景呈现为不同的颜色
将所有其他行设置为原始颜色的背景

我可以使用基于状态值的条件渲染来更改背景。虽然这会改变所有行的背景。

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

我当前的工作示例在这里 https://codesandbox.io/s/peaceful-haibt-2nefw

感谢您的帮助

【问题讨论】：

标签： reactjs material-ui material-table

【解决方案1】：

您还需要传递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

【讨论】：

【解决方案2】：

包的 documentation 提供了一个示例，说明如何使用 options 属性完成此操作。

我 fork 你的沙盒here。

【讨论】：