如何将事件监听器拖放到React组件-Java 学习之路

我正在构建一个允许在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组件中？

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

回复于 2024-05-08T15:55:34+08:00

如何将事件监听器拖放到React组件

1 回答

相关问题