在另一个选择之后选择和取消选择行 - ReactJS Hooks

Question

拥有以禁用按钮开头且未选择任何行的车牌列表。

这是应该做的：

1. 选择一行时，“前进”按钮启用；
2. 选择已经选择的行时，再次取消选择并再次禁用按钮。
3. 当列表选择了一行并且用户单击另一行时，取消选择旧行并选择新行。

我做的sn-p代码：

https://codesandbox.io/s/busy-galileo-mw3p3?fontsize=14&hidenavigation=1&theme=dark

面对这个问题：

1. 需要单击 2 次才能将 CSS 样式“custom-col-row-active”设置为选定的行。按钮已启用，第一次点击。
2. 当一条线已被选中时，当您单击其他线时，它们也会被选中。在选定的行上单击 1 次，所有行都将被取消选择。

我知道需要使用数据表来取消选择已经选择的行，但我不知道如何获取完整的数据表，因为我只在单击特定行时获取数据。

这里有什么提示吗？

Answer 1

@Rafael，我对 tabler-react 了解不多，但这只是我给你的建议。您的handleSetActivedRow 似乎有问题。我不明白你为什么写onClick={(e) => handleSetActivedRow(e)}。当 onClick 本身时，您正在调用内联函数，并且再次将其带到另一个函数handleSetActivedRow。这是不好的编码；相反，您可以这样做onClick={handleSetActiveRow}。其次，您需要再次检查您的 handleSetActiveRow 函数。我不明白你为什么要回来？没有必要的时候。您需要检查的是您希望在单击元素时将 className 设置为 -active。