Estoy creando un componente que permite arrastrar y soltar archivos locales en un div. Luego hay una salida de información sobre el archivo descartado.

Mi problema es que no sé cómo conectar correctamente los oyentes de eventosdrop ydragover Al crear mi componente.

El componente de mi aplicación es donde está toda mi lógica (controlador de caída y dragover) y creé un componente separado donde se colocarán los archivos: el componente dropZone.

Intenté poner el detector de eventos en la etiqueta dropZone en mi componente de aplicación con uncomponentDidMount donde si mi componente dropZone se hubiera procesado, ponga un detector de eventos en él:

componentDidMount(){
      const dropZone = document.getElementById('dropZone');
      dropZone.addEventListener('dragover', this.allowDrop.bind(this))
      dropZone.addEventListener('drop', this.dropHandler.bind(this))
    } 

esto no funcionó

Luego intenté ponerlo en mi etiqueta dropZone que vive en el componente de mi aplicación:

<DropZone dropZone = {"dropZone"} onDragOver = {this.allowDrop.bind(this)} 
 onDrop ={this.dropHandler.bind(this)} >      
</DropZone>

esto tampoco agregó un detector de eventos a dropZone. He intentado un par de otras cosas, pero estas son las que pensé que deberían haber funcionado.

Entonces mis preguntas son,

¿Cómo agrego eldrop ydragover oyentes de eventos en dropZone?

¿Debo agregar estos oyentes de eventos en la aplicación y pasarlos al componente dropZone como accesorio? ¿O no es necesario pasar incluso necesario?

¿O debería agregar los detectores de eventos en dropZone directamente para que las funciones de mi controlador de eventos vivan en el componente dropZone?