La guía o código que encontrarás en este artículo es la resolución más rápida y efectiva que encontramos a tus dudas o problema.
Solución:
Los componentes de React exponen todos los eventos de mouse estándar de Javascript en su interfaz de nivel superior. Por supuesto, todavía puedes usar :hover en su CSS, y eso puede ser adecuado para algunas de sus necesidades, pero para los comportamientos más avanzados activados por un desplazamiento, deberá usar Javascript. Entonces, para administrar las interacciones de desplazamiento, querrá usar onMouseEnter y onMouseLeave. Luego los adjunta a los controladores en su componente de esta manera:
this.someHandler
onMouseLeave=() => this.someOtherHandler
/>
Luego, usará alguna combinación de estado/accesorios para pasar el estado modificado o las propiedades a los componentes React secundarios.
ReactJs define los siguientes eventos sintéticos para eventos de mouse:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
Como puede ver, no hay un evento de desplazamiento porque los navegadores no definen un evento de desplazamiento de forma nativa.
Deberá agregar controladores para onMouseEnter y onMouseLeave para el comportamiento de desplazamiento.
ReactJS Docs – Eventos
Sé que la respuesta aceptada es excelente, pero para cualquiera que esté buscando una sensación de flotación que pueda usar setTimeout sobre mouseover y guarde el identificador en un mapa (de, digamos, ids de lista para establecer el identificador de tiempo de espera). Sobre mouseover borre el identificador de setTimeout y elimínelo del mapa
onMouseOver=() => this.onMouseOver(someId)
onMouseOut={() => this.onMouseOut(someId)
E implementar el mapa de la siguiente manera:
onMouseOver(listId: string)
this.setState(
... // whatever
);
const handle = setTimeout(() =>
scrollPreviewToComponentId(listId);
, 1000); // Replace 1000ms with any time you feel is good enough for your hover action
this.hoverHandleMap[listId] = handle;
onMouseOut(listId: string)
this.setState(
... // whatever
);
const handle = this.hoverHandleMap[listId];
clearTimeout(handle);
delete this.hoverHandleMap[listId];
Y el mapa es así,
hoverHandleMap: [listId: string]: NodeJS.Timeout = ;
yo prefiero onMouseOver y onMouseOut porque también se aplica a todos los niños en el HTMLElement. Si esto no es necesario, puede utilizar onMouseEnter y onMouseLeave respectivamente.
Tienes la opción de defender nuestra publicación mostrando un comentario o dejando una puntuación te estamos agradecidos.