咨询React场景下如何实现点击表格行时仅修改当前选中行的样式

完全贴合React的渲染逻辑，不用手动操作DOM，从根源上避免其他成员行被误加样式的问题，具体步骤：

第一步：存好当前选中行的唯一标识 #

你现在的列表是多团队分组的，不同团队下的成员索引都是从0开始排的，如果只存成员索引，很容易出现不同团队里同索引的行同时被加上选中样式的bug。
所以在组件状态里加一个存储项，专门记当前被点中的行的位置，位置用「所属团队索引+成员在团队内的索引」组成的二元组表示就行：
const [selectedRowPos, setSelectedRowPos] = useState(null);
如果是类组件，直接把这个值放到this.state里就好。

第二步：点击的时候同步更新状态 #

给tr的点击事件补一行逻辑，点了哪个行，就把这个行的位置记到刚才的状态里，再触发原来的swapMember方法：

<tr onClick={() => {
  setSelectedRowPos([indexOfTeamModel, indexOfMember]);
  swapMember(indexOfTeamModel, indexOfMember);
}}>

第三步：动态给tr绑样式 #

在tr上加类名判断，只有当前行的位置和状态里存的选中位置完全对上的时候，才给它挂你要的专属样式类，剩下的行全部用默认样式就行：

<tr 
  // 原有属性保留
  className={selectedRowPos?.[0] === indexOfTeamModel && selectedRowPos?.[1] === indexOfMember 
    ? 'my-special-row-style' 
    : 'default-row-style'}
>

第四步：写好两类样式的具体表现 #

比如在CSS里写清楚两种状态的效果：

/* 普通成员行默认样式 */
.default-row-style {
  cursor: pointer;
  background: #fff;
}
/* 被点击行的专属样式 */
.my-special-row-style {
  cursor: pointer;
  background: #e8f3ff;
  font-weight: 500;
  color: #1665d8;
}

容易踩的坑 #

• 别图省事直接拿事件对象改DOM类名，比如e.currentTarget.classList.add('selected')，这种写法在组件重渲染、列表更新的时候很容易被覆盖，搞不好就会出现好几个行留着选中样式的问题，也不符合React的渲染逻辑。
• 你原有代码里的mem.member !== []判断根本不起作用，JS里数组是引用类型，哪怕是空数组，和[]做相等判断永远是false，这个条件永远成立，建议换成更严谨的存在性判断，比如检查mem.member是不是空、有没有实际的字段值。

内容的提问来源于stack exchange，提问作者Ali