小编Car*_*lez的帖子

我正在构建一个允许在div上拖放本地文件的组件.然后输出有关删除文件的信息.

我的问题是我不知道如何正确附加事件监听器drop以及dragover创建组件时.

我的应用程序组件是所有逻辑所在的地方(drop和dragover的处理程序),我创建了一个单独的组件,其中文件将被删除 - dropZone组件.

我尝试将事件监听器放在我的App组件上的dropZone标签上componentDidMount,如果我的dropZone组件已被渲染,则在其中放置一个事件监听器:

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

这没用

然后我尝试将它放在我的app组件上的dropZone标签中:

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

这并没有向dropZone添加事件监听器.我尝试了其他一些东西,但这些是我应该工作的东西.

所以我的问题是,

• 如何向dropZone 添加drop和dragover事件监听器？

• 我应该在App上添加这些事件监听器并将它们作为prop传递给dropZone组件吗？或者甚至不需要传递下来

• 或者我应该直接在dropZone上添加事件监听器,因此我的事件处理函数存在于dropZone组件中？