如何将拖放事件侦听器附加到 React 组件

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

我的问题是我不知道如何正确附加事件监听器drop and 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 and dragoverdropZone 的事件侦听器？

• 我应该在应用程序上添加这些事件侦听器并将它们作为道具传递给 dropZone 组件吗？或者甚至没有必要传承

• 或者我应该直接在 dropZone 上添加事件侦听器，以便我的事件处理函数位于 dropZone 组件中？

你不需要使用道具。您只需在 DropZone 组件中添加所有事件即可。

http://codepen.io/jzmmm/pen/bZjzxN?editors=0011

这是我添加事件的地方：

  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);
  }

你的渲染方法：

  render() {
    return (
      <div>
        {this.props.children}
        <div id="dragbox" className={this.state.className}>
          Drop a file to Upload
        </div>
      </div>
    );
  }

正如您在 componentDidMount 中看到的，我也向 #dragbox 添加了一个事件监听器。因为一旦您将文件拖到页面上，#dragbox 就会位于鼠标光标下方，因此它需要一个 Dragleave，以防您决定不想将文件拖放到那里。

Also, dragover需要捕获drop

然后在我的应用程序组件中，我可以像这样使用它：

class App extends React.Component {
  render() {
    return (
      <DropZone>
        <div>
          <h1>Drag A File Here...</h1>
        </div>
      </DropZone>
    );
  }
}