如何连接Drag&将事件侦听器拖放到React组件 [英] How to Attach Drag & Drop Event Listeners to a React component

问题描述

我正在构建一个允许在div上拖放本地文件的组件。然后，有一个关于丢弃的文件的信息的输出。

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

我的应用程序组件是我所有逻辑所在的地方（drop和dragover的处理程序），我创建了一个单独的组件，其中的文件将被丢弃在 - dropZone组件上。 / p>

我尝试将事件侦听器放在我的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。我已经尝试了其他几件事情，但这些都是我应该工作的。

所以我的问题是，

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




• 我应该在App上添加这些事件监听器，并将它们作为prop来传递给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 = dragboxclassName = {this.state.className}> 
将文件拖放到上传
< / div> 
< / div> 
）; 
} 
  

正如您在componentDidMount中可以看到的，我还添加了一个eventlistener到#dragbox 。因为一旦将文件拖动到页面上，#dragbox就位于鼠标光标下，所以需要拖曳功能，以防您决定不要将文件放在那里。

另外，需要 dragover 来捕获 drop

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

  class App extends React.Component {
 render（）{
 return（
< DropZone> 
< div> 
< h1>拖动文件在这里...< / h1> 
< / div> 
< / DropZone> 
）; 
} 
} 
  

I'm building a component that allows local files to be dragged and dropped on a div. Then there's an output of information about the dropped file.

My problem is I don't know how to properly attach the event listeners drop and dragover when creating my component.

My App component is where all where all my logic is (handler for drop and dragover) and I created a separate component where files will be dropped on - dropZone component.

I tried putting the event listener on the dropZone tag on my App component with a componentDidMount where if my dropZone component had been rendered put an event listener on it:

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

this didn't work

I then tried putting it in my dropZone tag that lives on my app component:

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

this didn't add an event listener to dropZone either. I've tried a couple of other things but these are the ones that I though should've worked.

So my questions are,

• how do I add the drop and dragover event listeners to dropZone?

• Should I be adding these event listeners on App and passing them to dropZone component as a prop? Or is no passing down even necessary

• Or should I be adding the event listeners on dropZone directly and so my event handler functions live in the dropZone component?

解决方案

You don't need to use props. You can just add all the events inside your DropZone component.

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

This is where i add the events:

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

Your render method:

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

As you can see in componentDidMount, i added an eventlistener to #dragbox as well. Because once you drag a file over the page, #dragbox is under the mouse cursor, so it needs a dragleave in case you decide you don't want to drop the file there.

Also, dragover is needed to capture the drop

Then in my App component, i can use it like this:

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

这篇关于如何连接Drag&将事件侦听器拖放到React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！