React - 如何在悬停时将 CSS class 动态应用到单个 table 行

Question

我试图在鼠标悬停在行中的任何单元格上时以粉红色突出显示 'Position' 和 'Team' 单元格。

我的悬停 class 正在应用，但应用于每行的前两个单元格，而不是特定行的前两个单元格。

无悬停：

悬停：

onClick 事件识别单独的行（即单击某行时我可以看到 team.teamId），但是 'tableStyles.rowHovered' class 应用于每一行，无论哪一行我盘旋过去。

const [inHover, setHover] = useState(false);
        
    const hoverStyles = () => {
        
            let styles = `${tableStyles.rowBorderless} ${tableStyles.pointer}`; 
        
            if (inHover) {
              styles += ` ${tableStyles.rowHovered}`;
            }
        
            return styles;
          }
          
          const getTeamRow = (team, index, tableData) => {
        
            let positionShifts = getMinAndMaxPositions(team, tableData);
            //console.log(positionShifts);
        
            return (
              <tr id={'teamRow' + (index + 1)} key={team.teamId} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
                <td className={hoverStyles()} onClick={() => { setSelectedTeamId(team.teamId) }}>{index + 1}</td>
                <td className={hoverStyles()} onClick={() => { setSelectedTeamId(team.teamId) }}>{team.teamName}</td>                       
        
                {tablePositionArray.map((td) => {
                  return <td id={'posCol' + td} className={getTableStyles(positionShifts.minPos, positionShifts.maxPos, td)} key={td}></td>                               
                })}                          
              </tr>
            );
          }

这不是我项目的全部代码，只是我的 table 形成的周围区域。

提前致谢。

Answer 1

我可以想到 2 个选项，您的代码中的问题是悬停状态是所有行的状态。

要解决它你至少可以通过这两个选项：首先，也许是最好的：只是在这些列中添加 css 并添加悬停行为以获取更多信息看这里 https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

或：在悬停状态下，您可以提供行的索引或 ID 来更新样式。

    const hoverStyles = (index) => {
        
            let styles = `${tableStyles.rowBorderless} ${tableStyles.pointer}`; 
        
            if (index === inHover) {
              styles += ` ${tableStyles.rowHovered}`;
            }
        
            return styles;
          }

并用行的索引更新索引

<tr id={'teamRow' + (index + 1)} key={team.teamId} 
       onMouseEnter={() => setHover(index)} onMouseLeave={() => setHover(null)}>
<td className={hoverStyles(index)} onClick={() => { 
        setSelectedTeamId(team.teamId) }}>{index + 1}</td>
<td className={hoverStyles(index)} onClick={() => { 
        setSelectedTeamId(team.teamId)}}>

React - 如何在悬停时将 CSS class 动态应用到单个 table 行

React - How to dynamically apply a CSS class to a single table row on hover

javascript

hover

reactjs