Por favor vea este codeandbox .
Tengo un div principal que debe controlar los eventos que se pueden arrastrar (como cuando se arrastra un archivo sobre él). Cuando se invoca onDragEnter , quiero que cambie el color de fondo. Sin embargo, tengo un div secundario que, al pasar el mouse sobre él, invoca el evento onDragLeave del div principal. Intenté usar una referencia con este div secundario para determinar si el objetivo del evento está contenido en el div secundario, pero parece que no funciona. ¿Cómo puedo evitar que un div secundario en React invoque el evento onDragLeave ? ¡Gracias!
import React, { useState } from 'react'; const App = () => { const [dragOver, setDragOver] = useState(false); const preventDefaults = (event) => { event.preventDefault(); event.stopPropagation(); }; const onDragEnter = (event) => { preventDefaults(event); console.log('ENTER'); if (!dragOver) { setDragOver(true); } }; const onDragLeave = (event) => { preventDefaults(event); console.log('LEAVE'); setDragOver(false); }; return ( <div data-testid="document-upload" onDragEnter={onDragEnter} onDragLeave={onDragLeave} style={{ background: dragOver ? 'green' : 'red', height: '20rem', width: '20rem', display: 'flex', alignItems: 'center', justifyContent: 'center', }} > <div style={{ border: '2px solid blue', height: '10rem', width: '10rem' }} /> </div> ); }; export default App;La forma más sencilla de hacer esto sería establecer pointerEvents: "none" en el accesorio de style del <div> secundario, de modo que se ignoren todos los eventos relacionados con el puntero en este div. Sin embargo, eso introduciría algunas limitaciones, como que no podría vincular eventos de clic al div secundario.
Si esto no se ajusta a las restricciones de su aplicación, puede modificar su controlador onDragLeave para inspeccionar el relatedTarget relacionado del evento (ver documentos ). Si el arrastre deja el padre <div> pero ingresa a un hijo del padre, entonces el relatedTarget (es decir, div hijo) estará contenido (ver documentos ) por el currentTarget (es decir, el padre <div> )
Aquí está el código que debería funcionar:
const onDragLeave = (event) => { preventDefaults(event); // This condition will be true when the drag leaves the parent for a child, // but false when the drag leaves the parent for somewhere else. if (event.currentTarget.contains(event.relatedTarget)) return; console.log("LEAVE"); setDragOver(false); };Ver este codeandbox .