Question

我正在构建一个允许在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添加事件监听器。我尝试了其他一些东西，但这些是我应该工作的东西。

所以我的问题是，

如何将drop和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添加了一个eventlistener。因为一旦你在页面上拖动文件，＃dragbox就在鼠标光标下面，所以它需要一个dragleave，以防你决定不想将文件放在那里。

此外，需要dragover才能捕获drop

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

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

Answer 2

使用styled-components库和React Hooks的@mnsr答案版本

unlink

如何附加拖动和将事件监听器删除到React组件

2 个答案: