Событие, не отвязанное от документа, в React.Js

Question

У меня есть простая, но сложная проблема. Я создаю компонент пользовательского интерфейса в React.Js, который использует кнопки. Ручки можно поворачивать слева направо (например, с помощью физического ручка), и будет отображать заголовок соответствующей кнопки (север, юг и т. Д.), Исходя из того, сколько пользователь перетащил их курсор (все это происходит в реальном времени) , Итак, я слушаю событие onDragStart, чтобы получить начальный заголовок (по оси Y) регулятора, а затем добавить событие «перемещение мыши» к слушателям событий документа и перемещение по оси Y из события «перемещение мыши» по сравнению с начальной осью Y из события «onDragStart», чтобы найти 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.