从可拖动组件中移除事件监听器

Remove an event listener from a draggable component

我正在使用 React 中的 ES6 组件并制作一个简单的滑块组件。在我的 mousedown 事件中,我为 mousemove 添加了一个侦听器,因为 onDrag 的处理程序响应不够充分。我正在尝试删除 mouseup 上的 mousemove 侦听器,因为这意味着用户已完成在滑块上的拖动。但是,我无法关闭我的事件侦听器,它一直在触发 onDrag 函数(将记录“我仍然执行”)。我错过了一些明显的东西吗?我尝试像其他答案建议的那样传递命名函数,但它仍然会触发。

ES6代码:

import React from 'react';

class PriceSlider extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {positionX: 0, offset: null, dragging: null}
  }
  _onDrag(e) {
    console.log("i still execute")
    if(e.clientX > 0) {
      this.setState({positionX: e.clientX});
    }
  }
  _removeDragHandlers() {
    let node = React.findDOMNode(this.refs.circle1);
    node.removeEventListener("mousemove", this._onDrag.bind(this), false);
    return;
  }
  _addDragHandlers() {
    let node = React.findDOMNode(this.refs.circle1);
    node.addEventListener("mousemove", this._onDrag.bind(this), false);
    return;
  }
  componentDidMount() {
    this.setState({offset: this.refs.circle1.getDOMNode().getBoundingClientRect().left })
  }
  _onMouseDown(e) {
    this._addDragHandlers();
  }
  _onMouseUp(e){
    this._removeDragHandlers();
  }
  render() {
    let circle1Style = {left: this.state.positionX - this.state.offset}

    if(this.state.positionX === 0) {
      circle1Style = {left: this.state.positionX}
    }

    return(
      <div className="slider">
        <span className="value">Low</span>
        <span className="circle" style={circle1Style} onMouseDown={this._onMouseDown.bind(this)} onMouseUp={this._onMouseUp.bind(this)} ref="circle1"></span>
        <span className="line"></span>
        <span className="circle" ref="circle2"></span>
        <span className="value">High</span>
      </div>
    )
  }
}

使用命名函数,我尝试做类似的事情:

node.addEventListener("mousemove", function onDrag() {
  if(!this.state.dragging)  {
    node.removeEventListener("mousemove", onDrag, false)
  }
})

无济于事。非常感谢任何有关改进这一点的帮助或建议。我没有包含 jQuery 或其他 Javascript 库,需要在没有插件或库帮助的情况下解决这个问题。

this._onDrag.bind(this) returns 每次都有一个新功能 - 所以您添加然后尝试删除不同的功能。你需要做一次,然后每次都引用同一个函数:

constructor(props, context) {
    …
    this._onDrag = this._onDrag.bind(this);
}
_removeDragHandlers() {
    …
    node.removeEventListener("mousemove", this._onDrag);
}
_addDragHandlers() {
    …
    node.addEventListener("mousemove", this._onDrag, false);
}