javascript - 如何将拖放事件监听器附加到 React 组件

Question

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

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

我的 App 组件是我所有逻辑所在的地方(拖放和拖动的处理程序)，我创建了一个单独的组件，文件将被放置在该组件上 - dropZone 组件。

我尝试使用 componentDidMount 将事件监听器放在我的 App 组件上的 dropZone 标记上，如果我的 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？

• 我应该在 App 上添加这些事件监听器并将它们作为 prop 传递给 dropZone 组件吗？或者连传承都没有必要

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

Answer 1

您不需要使用 Prop 。您可以只在 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，以防您决定不想将文件拖放到那里。

另外，dragover 需要捕获drop

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

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