React项目中实现表格行点击单独高亮（设置背景色）的问题求助

你遇到的核心问题是状态设计和事件绑定的错误，导致所有行共享同一个布尔状态，点击时全部触发变色。具体问题和修正方案如下：

问题分析 #

1. 状态类型错误：你用布尔值isActive作为状态，所有行都基于这个值判断是否高亮。点击时这个状态全局切换，自然所有行一起变色。
2. 事件绑定错误：onClick={handleColorChange(e)}这种写法会在组件渲染时直接执行函数，而不是点击时触发，同时还会传错参数。

修正方案 #

1. 修改状态存储逻辑

把布尔状态改成存储选中行的唯一标识（比如数据里的id字段），这样能精准定位哪一行被选中：

// 初始状态为null，表示没有选中任何行
const [selectedRowId, setSelectedRowId] = useState(null); 

// 点击时传入当前行的唯一ID，更新选中状态
const handleColorChange = (rowId) => {
    setSelectedRowId(rowId);
};

2. 修正表格行的渲染逻辑

每一行根据自身的唯一标识和选中状态对比，决定是否高亮；同时修正事件绑定方式：

<table>
   <thead>
      <tr>
         <th>Name</th>
         <th>LastName</th>
      </tr>
   </thead>
   <tbody>
      {myRecors.map((current) => (
      <tr 
         style={{
             // 只有当前行ID和选中ID匹配时才设置背景色
             backgroundColor: selectedRowId === current.id ? 'crimson' : '',
         }}
         // 点击时调用函数并传入当前行ID，避免渲染时执行
         onClick={() => handleColorChange(current.id)}
         // 必须添加key属性，符合React列表渲染规范
         key={current.id}
      >
         <td>{current.Name}</td>
         <td>{current.LastName}</td>
      </tr>
      ))}
   </tbody>
</table>

补充说明 #

• 如果你的数据里没有id这种唯一字段，可以用其他组合值（比如current.Name + current.LastName，但要确保不会重复），或者临时用map的索引index作为标识（不推荐，数据增删时索引会变化，可能导致异常）。
• 如果需要支持取消选中（点击已选中的行取消高亮），可以修改handleColorChange函数：

const handleColorChange = (rowId) => {
    setSelectedRowId(prevId => prevId === rowId ? null : rowId);
};

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