材质表如何选择一行，以便在选择时更改背景颜色

Question

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

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

感谢您的帮助

Answer 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

Answer 2

程序包的documentation提供了一个示例，说明如何使用options道具来完成此操作。

我为您的沙盒here分叉了。