0
838
ViewsReaccionar onMouseEnter y onMouseLeave error, no funciona de manera consistente
Tengo problemas con React onMouseEnter y onMouseLeave , a veces los eventos no se activan cuando deberían
Estoy usando onMouseEnter y onMouseLeave para mostrar/ocultar un panel de información sobre herramientas de React Portal Modal:
la cuestión:
si el cursor del mouse pasa lentamente sobre las imágenes, onMouseEnter y onMouseLeave funcionan como se esperaba, pero si el cursor del mouse pasa sobre la imagen rápidamente (horizontalmente), el código se rompe y se muestran varios paneles de información sobre herramientas (porque onMouseLeave no se activó)
aquí está el enlace del video que muestra el problema: https://www.veed.io/view/7669d6c4-6b18-4251-b3be-a3fde8a53d54?sharingWidget=true
aquí está el enlace de codesandbox para el error que mencioné: https://codesandbox.io/s/epic-satoshi-rjk38e
cualquier ayuda es apreciada
2 answers
Answer question0
La causa de los "eventos perdidos" no es que los detectores de eventos no se activen. El problema es que mezcla el código React, que opera en el DOM virtual, con el código JS "clásico", que opera en el DOM del navegador. Estos dos DOM no están sincronizados la mayor parte del tiempo, lo que provoca los contratiempos que ves.
Intente eliminar todo el código que accede directamente al DOM y opere solo en los componentes de React (es decir, en el DOM virtual).
Aquí hay un ejemplo simplificado de cómo implementar su información sobre herramientas en estilo React-only:
https://codesandbox.io/s/musing-villani-c0xv24?file=/src/App.js
0
Gran pregunta. Tuve un problema similar con uno de mis componentes y la gestión del estado global. Después de mirar su código, parece que debe agregar los eventos onFocus y onBlur .
Ejemplo
<div onMouseOver={() => handleEnter()} onMouseOut={() => handleExit()} >se convierte
<div onMouseOver={() => handleEnter()} onFocus={() => handleEnter()} onMouseOut={() => handleExit()} onBlur={() => handleExit()} >Esto también resuelve el problema de que el móvil no tenga el mismo estado del mouse.
¡Espero que esto ayude a la codificación feliz!