React - 如何在悬停时将 CSS 类动态应用到单个表格行答案

【问题标题】：React - How to dynamically apply a CSS class to a single table row on hoverReact - 如何在悬停时将 CSS 类动态应用到单个表格行
【发布时间】：2021-09-23 17:57:02
【问题描述】：

当悬停在一行中的任何单元格上时，我正试图以粉红色突出显示“职位”和“团队”单元格。

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

无悬停：

悬停：

onClick 事件可识别单个行（即，当单击一行时我可以看到 team.teamId），但无论我将鼠标悬停在哪一行，都会将“tableStyles.rowHovered”类应用于每一行。

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>
            );
          }

这不是我项目的全部代码，只是我的表格周围的区域。

提前谢谢你。

【问题讨论】：

如果我不得不猜测（现在我猜了，因为你还没有发布所有代码！）我猜你的状态不是呈现行的代码的本地状态——IE所有行都基于相同的inHover 计算hoverStyles。也许发布一个可重现的例子而不是片段？ stackoverflow.com/help/minimal-reproducible-example
您好，感谢您的回复 - 很抱歉含糊不清，我试图简洁！下面的答案通过索引解决了这个问题。

标签： javascript reactjs hover

【解决方案1】：

我能想到 2 个选项，您代码中的问题是 Hover 的状态是所有行的状态。

要解决它，您至少可以通过以下 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)}}>

【讨论】：

非常感谢！我尝试了您的第二个选项，它通过传递行的索引来工作。