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

Question

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

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

我的App组件是我所有逻辑所在的地方（拖放和拖移的处理程序），我创建了一个单独的组件，该文件将被放置在该组件上-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))
    }

这没用

然后，我尝试将其放在应用组件上的dropZone标签中：

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

这也没有向dropZone添加事件侦听器。我已经尝试了其他一些方法，但是这些都是我应该尝试的方法。

所以我的问题是

• 如何将dropand dragover事件侦听器添加到dropZone？

• 我应该在App上添加这些事件侦听器，并将其作为道具传递给dropZone组件吗？还是根本不需要传承

• 还是应该直接在dropZone上添加事件侦听器，这样我的事件处理函数才能存在于dropZone组件中？

Answer 1

您不需要使用道具。您只需将所有事件添加到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就会在鼠标光标下方，因此它需要进行拖拉，以防您决定不想将文件拖放到此处。

此外，dragover还需要捕获drop

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

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