在另一个选择中禁用 table 行

Question

我正在使用 React material-table 并且我想知道在选择 table 行后是否有办法使其他行成为相同的 table禁用。我正在使用：

material-table selection: true

我看到有一个 "onSelectionChange" 但我无法让它适用于我的情况。

Answer 1

像这样在 jsx 元素中使用 disabled：

`<td disabled={true} />`

或者你也可以在花括号中创建自己的逻辑，当它应该被禁用时！

谢谢！

Answer 2

是的，这是可能的：先保存选中的行在state and return undefined，如果有选中的行去掉悬停动画： onRowClick={!this.state.selectedRow ? ((evt, selectedRow) => this.setState({ selectedRow })): undefined}.

此外，您可以覆盖选项中的 rowStyle 以使文本颜色变灰以使行看起来已禁用：

options={{
         rowStyle: rowData => ({
            color: (this.state.selectedRow && this.state.selectedRow.tableData.id !== rowData.tableData.id) ? '#AAA' : '#000'
       })
}}

点击前看起来像这样：点击后像这样：当然，您可以根据自己的喜好更改颜色和行为。

如果选择 parent，这里是 codesandbox 以防止 children。有帮助吗？

在另一个选择中禁用 table 行

Disable table row on another's selection

reactjs

material-table