Estoy tratando de hacer que cuando un usuario pase el mouse sobre una fila al reaccionar, aparezca un botón/icono de edición junto al nombre de la carpeta. Estaba pensando que puedo darles cada estado individual y usar una clave para realizar un seguimiento de ellos individualmente y usar un estado de uso para desactivar onMouseOver y onMouseLeave.
En este momento, puedo desplazarme y mostrar dos íconos al mismo tiempo en lugar de solo sobre el que estoy pasando el mouse.
No estoy muy seguro de cómo usar la clave junto con useState para realizar un seguimiento de qué fila se está desplazando, aquí está el código que tengo hasta ahora
const [isHovered, setIsHovered] = useState(false); return( <TableBody> {sortedData.map(row => ( <KnowledgeBaseTable key={row.root.folderName} contents={row.root.contents} > <TableCell component="th" scope="row" //onMouseEnter={() => setIsHovered(!isHovered)}> onMouseOver={() =>setIsHovered(!isHovered)} onMouseOut={() => setIsHovered(isHovered)} > {row.root.folderName} {isHovered ? <EditIcon /> : <EditAttributesIcon/>} </TableCell> <TableCell>{convertISOtoLocalDate(row.root.metaData.updatedDate)}</TableCell> </KnowledgeBaseTable> ))} </TableBody> ):Puede usar onMouseOver para mostrar el ícono de edición y luego eliminar el ícono en onMouseLeave . Puede consultar otros eventos sintéticos aquí: https://reactjs.org/docs/events.html
Código de ejemplo a continuación
import React from 'react'; import './App.css'; function App() { function changeBackground(e) { e.target.style.background = 'red'; } return ( <div className="App"> <button onMouseOver={changeBackground}>Hover over me!</button> </div> ); } export default App;Si desea depurar y ver en qué fila se ha desplazado, puede intentar algo como esto:
onMouseOver={()=>{ console.log(row.root.folderName); setIsHovered(true); }} Además, lógicamente hablando, debe ser más específico al configurar el estado isHovered. onMouseOver lo establece en true ; mientras que onMouseOut lo establece en false . En lugar de simplemente negar lo que es actualmente. Esto ya puede resolver el problema.