事件没有从文档中解除绑定，React.Js

我有一个简单但复杂的问题。我在使用旋钮的React.Js中构建一个UI组件。旋钮可以从左到右旋转（就像一个物理旋钮一样），并根据用户拖动光标的多少（所有这些都是实时发生的）来渲染适当的旋钮标题（北，南等）。因此，我正在侦听“onDragStart”事件以获取旋钮的初始标题（在Y轴上），然后将“鼠标移动”事件添加到文档的事件侦听器，并将Y轴移动从“onDragStart”事件中的“鼠标移动”事件与最初的Y轴进行比较，从拖动中查找Delta，然后渲染适当的图像。当我尝试从基于“鼠标向上”事件（因为用户在达到他们期望的标题时释放鼠标按钮）从文档中注销事件（您知道，良好的编程实践）时，问题就出现了。根据我试图在浏览器听到“鼠标向上”事件时向控制台打印的结论，我得出结论（由于没有打印任何东西），mouseUp事件没有被听到，因此， dragStop方法未被运行。我在下面粘贴了我的代码（在JavaScript和JSX中），并且请不要犹豫，要求更清楚的解释。事件没有从文档中解除绑定，React.Js

var Knob = React.createClass({ 
    getInitialState: function(){ 
    return{season: this.props.season }; 
    }, 

    //Default properties 
    getDefaultProps: function() { 
    return { season: 1 }; 
    }, 

    //Start the drag functionality 
    drag_start: function(data){ 

    // Store current 
    this.clientY = data.clientY; 
    console.log("current location is: "+this.clientY); 

    //Register 
    document.addEventListener('mousemove', this.drag); 
    console.log("run"); 
    document.addEventListener('mouseup', this.dragStop); 
    console.log("run"); 
    }, 

    drag: function(data){ 
    // Compare how far 
    console.log("New location IS: "+data.clientY); 
    var deltaY = data.clientY - this.clientY; 

    // Do stuff with delta 
    console.log("Difference is" + deltaY); 

    // Store new current location 
    this.clientY = data.clientY; 
    }, 

    //Unregister the drag event from the document 
    dragStop: function() { 
    console.log("ran drag stop"); 
    document.removeEventListener('mousemove', this.drag); 
    document.removeEventListener('mouseup', this.dragStop); 
    }, 

render: function(){ 
    return(
      <div> 
      <img src = "../style/img/wood-bg.png" /> 
      <img src ={ '../style/img/Seasons/sprites_cut/'+this.state.season+'.png'} ref = "season" onDragStart = {this.drag_start} /> 
      </div> 
    );//Ed 
    } //end render function 
}); //end knob class 

React.render(<Knob />, mountNode);

来源

2015-09-18 Justin E. Samuels

你可以有一个名为'stoppedDragging'的布尔状态属性，并且在侦听器中有：'if（！this.state.stoppedDragging）{/ * do stuff ... * /}'。 – usandfriends

当您添加事件侦听器，绑定功能this以维持范围：

//Register 
document.addEventListener('mousemove', this.drag.bind(this)); 
console.log("run"); 
document.addEventListener('mouseup', this.dragStop.bind(this)); 
console.log("run");

否则事件的功能将被绑定到document。

来源

2015-09-18 21:22:28 taxicala

嘿，那种工作，但现在它运行DragStop功能，即使鼠标仍然停机 –

事件没有从文档中解除绑定，React.Js

回答

相关问题