0
338
VistasReaccionar: cómo aplicar dinámicamente una clase CSS a una sola fila de tabla al pasar el mouse
Estoy tratando de resaltar las celdas 'Posición' y 'Equipo' en rosa cuando se pasa el cursor sobre cualquier celda en una fila.
Se está aplicando mi clase flotante, pero a las dos primeras celdas de cada fila en lugar de las dos primeras celdas de una fila específica.
Sin flotar: 
Flotar: 
El evento onClick reconoce filas individuales (es decir, puedo ver el team.teamId cuando se hace clic en una fila), pero la clase 'tableStyles.rowHovered' se aplica a cada fila sin importar sobre qué fila pase el mouse.
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> ); }Este no es el código completo de mi proyecto, solo las áreas que rodean donde se forma mi tabla.
Gracias de antemano.
1 Respuestas
Responde la pregunta0
Puedo pensar en 2 opciones, el problema en su código es que el estado de Hover es el estado de todas las filas.
para resolverlo, puede usar al menos estas 2 opciones: la primera y quizás la mejor: simplemente agregue un css a esas columnas y agregue el comportamiento de desplazamiento para obtener más información, consulte aquí https://developer.mozilla.org/en-US/ docs/Web/CSS/:hover
o: en el estado de desplazamiento, puede proporcionar el índice o la identificación de la fila para actualizar el estilo.
const hoverStyles = (index) => { let styles = `${tableStyles.rowBorderless} ${tableStyles.pointer}`; if (index === inHover) { styles += ` ${tableStyles.rowHovered}`; } return styles; }y actualice el índice con el índice de la fila
<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)}}>