看来这里的听众没有被删除。知道如何解决这个问题吗?我猜这与我“分享”听众的方式有关,我正在使用箭头函数(这里根据建议https://medium.freecodecamp.org/reactjs-pass-parameters-to-event-handlers-ca1f5c422b9 )
代码:
import * as React from 'react';
export default class ITestComponent extends React.Component {
public render() {
return (
<div>
<div
onMouseDown={this.handleMouseDown('horizontal')}
draggable={false}
style={{ border: '1px solid blue', padding:20 }}
>
Horizontal Drag Test
</div>
<div
onMouseDown={this.handleMouseDown('vertical')}
draggable={false}
style={{ border: '1px solid green', padding:20 }}
>
Vertical Drag Test
</div>
</div>
);
}
private handleMouseDown = (eType:string) => (e:any) => {
console.log('Add Event Listeners (handleMouseDown)', eType)
window.addEventListener('mousemove', this.handleMouseMove(eType))
window.addEventListener('mouseup', this.handleMouseUp(eType))
}
private handleMouseMove = (eType:string) => (e:MouseEvent) => {
console.log(' - handleMouseMove', eType, e.clientY)
};
private handleMouseUp = (eType:string) => (e:MouseEvent) => {
console.log('Remove Listeners (handleMouseUp)', eType)
window.removeEventListener('mousemove', this.handleMouseMove(eType))
window.removeEventListener('mouseup', this.handleMouseUp(eType));
};
}
单击“水平拖动测试”并向下拖动(按下鼠标按钮),释放鼠标按钮,然后再拖动一点后,控制台输出。
Add Event Listeners (handleMouseDown) horizontal
- handleMouseMove horizontal 61
...
- handleMouseMove horizontal 220
- handleMouseMove horizontal 221
Remove Listeners (handleMouseUp) horizontal
- handleMouseMove horizontal 222
- handleMouseMove horizontal 222
- handleMouseMove horizontal 228
...
具体问题是如何保留“重用”事件处理程序用于多种目的的概念?
注意我在这里没有像建议的答案之一那样使用匿名函数(Javascript removeEventListener not working)