Estou construindo um componente que permite que arquivos locais sejam arrastados e soltos em uma div. Depois, há uma saída de informações sobre o arquivo descartado.

Meu problema é que não sei como conectar corretamente os ouvintes do eventodrop edragover ao criar meu componente.

Meu componente App é onde está toda a minha lógica (manipulador para soltar e arrastar) e eu criei um componente separado, onde os arquivos serão soltos no componente dropZone.

Tentei colocar o ouvinte de evento na tag dropZone no meu componente App com umcomponentDidMount onde se meu componente dropZone tivesse sido renderizado, coloque um ouvinte de evento:

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

isso não funcionou

Tentei colocá-lo na minha tag dropZone que fica no meu componente de aplicativo:

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

isso também não adicionou um ouvinte de evento ao dropZone. Eu tentei algumas outras coisas, mas essas são as que eu deveria ter trabalhado.

Então, minhas perguntas são,

como eu adiciono odrop edragover ouvintes de eventos do dropZone?

Devo adicionar esses ouvintes de evento no App e passá-los para o componente dropZone como suporte? Ou não é necessário passar nem necessário

Ou devo adicionar os ouvintes de evento no dropZone diretamente para que minhas funções de manipulador de eventos permaneçam no componente dropZone?