从可拖动组件中移除事件监听器
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);
}
我正在使用 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);
}