Nuestro team especializado despúes de algunos días de trabajo y de recopilar de datos, dieron con la respuesta, esperamos que resulte de gran utilidad en tu plan.
Solución:
No es necesario utilizar accesorios. Simplemente puede agregar todos los eventos dentro de su componente DropZone.
Aquí es donde agrego los eventos:
componentDidMount()
window.addEventListener('mouseup', this._onDragLeave);
window.addEventListener('dragenter', this._onDragEnter);
window.addEventListener('dragover', this._onDragOver);
window.addEventListener('drop', this._onDrop);
document.getElementById('dragbox').addEventListener('dragleave', this._onDragLeave);
Su método de renderizado:
render()
return (
this.props.children
Drop a file to Upload
);
Como puede ver en componentDidMount, también agregué un detector de eventos a #dragbox. Porque una vez que arrastra un archivo sobre la página, #dragbox está debajo del cursor del mouse, por lo que necesita una hoja de arrastre en caso de que decida que no desea soltar el archivo allí.
También, dragover se necesita para capturar la drop
Luego, en el componente de mi aplicación, puedo usarlo así:
class App extends React.Component
render()
return (
Drag A File Here...
);
Comentarios y puntuaciones
Te invitamos a añadir valor a nuestro contenido informacional asistiendo con tu veteranía en las notas.