React右键菜单触发后行hover效果消失，自定义高亮方案遇阻求助

问题根源 #

右键触发contextmenu事件时，浏览器会默认移除行的hover状态，导致用户无法明确当前操作的行。你用自定义类实现高亮的思路是对的，问题出在row.values未定义以及状态管理的细节上。

一步步解决 #

1. 排查row.values未定义问题
   先在渲染表格行的位置打印row，确认数据结构：

   {data.map((row) => {
     console.log('当前行数据:', row); // 查看row实际结构
     return (
       <tr key={row.id}>...</tr>
     )
   })}
   

   大概率是你误解了数据结构——比如行数据里根本没有values属性，或者遍历时没拿到正确的行对象。如果数据是[{id: 1, name: "张三"}, ...]，应该用row.id/row.name这类实际存在的属性，而非row.values。

2. 用React状态管理选中行
   用useState存储选中行的唯一标识（比如id），比存整个行对象更高效且不易出错：

   import { useState, useEffect } from 'react';
   
   function YourTable() {
     const [selectedRowId, setSelectedRowId] = useState(null);
     // 假设表格数据存在data变量中
   
     // 处理右键菜单事件
     const handleRightClick = (e, row) => {
       e.preventDefault(); // 阻止浏览器默认右键菜单
       setSelectedRowId(row.id); // 用行的唯一id标记选中状态
       // 这里可添加自定义右键菜单的显示逻辑
     };
   
     // 点击页面其他区域清除选中状态
     const clearSelectedRow = () => {
       setSelectedRowId(null);
     };
   
     // 全局监听点击事件
     useEffect(() => {
       document.addEventListener('click', clearSelectedRow);
       // 组件卸载时移除监听
       return () => document.removeEventListener('click', clearSelectedRow);
     }, []);
   
     return (
       <table>
         <tbody>
           {data.map((row) => (
             <tr
               key={row.id}
               onContextMenu={(e) => handleRightClick(e, row)}
               // 为选中行添加自定义高亮类
               className={selectedRowId === row.id ? 'inspected' : ''}
             >
               <td>{row.name}</td>
               {/* 其他单元格内容 */}
             </tr>
           ))}
         </tbody>
       </table>
     );
   }
   

3. 同步高亮样式
   让自定义类的样式和hover保持一致（可按需强化视觉效果）：

   tbody tr:hover,
   tbody tr.inspected {
     background-color: #f5f5f5; /* 和hover一致的背景色 */
     border-left: 3px solid #165DFF; /* 可选：添加左侧边框强化视觉 */
   }
   

新手注意事项 #

• 渲染列表时必须加key，用行的唯一标识（比如id），不要用数组索引。
• 事件中传递参数要包一层箭头函数，比如onContextMenu={(e) => handleRightClick(e, row)}，否则row会始终指向最后一行数据。
• useState的更新是异步的，不要在setSelectedRowId后立刻使用selectedRowId的值。

内容的提问来源于stack exchange，提问作者Wesos de Queso