Question

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

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

Answer 1

添加事件侦听器时，将函数绑定到this以保持范围：

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

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

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

1 个答案: