Я создаю компонент, который позволяет перетаскивать локальные файлы на div. Тогда есть вывод информации о удаленном файле.

Моя проблема в том, что я не знаю, как правильно подключить слушателей событийdrop а такжеdragover при создании моего компонента.

Мой компонент приложения - это то, где вся моя логика (обработчик для перетаскивания и перетаскивания), и я создал отдельный компонент, куда будут сбрасываться файлы - компонент dropZone.

Я попытался поместить прослушиватель событий в тег dropZone на моем компоненте приложения с помощьюcomponentDidMount где, если мой компонент dropZone был обработан, поместите слушатель события в него:

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

это не сработало

Затем я попытался поместить его в свой тег dropZone, который живет в моем компоненте приложения:

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

это не добавляло слушателя события в dropZone. Я пробовал пару других вещей, но это те, которые я должен был сработать.

Так что мои вопросы

как мне добавитьdrop а такжеdragover Слушатели событий в dropZone?

Должен ли я добавлять эти прослушиватели событий в приложение и передавать их компоненту dropZone в качестве поддержки? Или нет передачи даже необходимо

Или я должен добавлять прослушиватели событий непосредственно в dropZone, чтобы мои функции обработчика событий находились в компоненте dropZone?