Как удалить конкретный слушатель событий из react.js элемента

Question

Я использую эту простую функцию визуализации с несколькими обработчиками:

render:function(){ 
     return (
      <div id="all-highlights" class="highlight-container" onMouseDown={this.drag} onMouseUp={this.dragEnd} onMouseMove={this.moving}> 
       <div class="highlight"> 

       </div> 
      </div> 
     ); 
    } 

В функции React.createClass, используя что-то вроде: this.removeTheListener функции, как я мог бы удалить конкретную функцию mouseMove? Независимо от производительности функции mouseMove, я знаю, что ее ресурс тяжелый, но для чего я делаю его идеальное событие.

Можно ли удалить только определенного слушателя, а затем удалить его обратно в другой момент времени?

Answer 1

В React, если вы хотите что-то изменить (атрибут, прослушиватель и т. Д.), Вы должны принудительно перенастроить компонент, обновив состояние. Затем вы создаете на основе этого состояния.

Вот кусок кода, который должен работать для вас:

var DraggableComponent = React.createClass({ 

    getInitialState: function() { 
    return { 
    dragging: false 
    }; 
    }, 

    render: function(){ 
    var onDrag = this.state.dragging ? this.onDrag : null; 
    return (
     <div 
     className="highlight-container" 
     onMouseDown={this.dragStart} 
     onMouseUp={this.dragEnd} 
     onMouseMove={onDrag}> 
     <div className="highlight"> 
      {this.props.children} 
     </div> 
     </div> 
    ); 
    }, 

    dragStart: function() { 
    this.setState({dragging: true}); 
    }, 

    dragEnd: function() { 
    this.setState({dragging: false}); 
    }, 

    onDrag: function() { 
    // ... 
    } 

}); 

Answer 2

Как и все в Реагировании, ключ должен мыслить декларативно. Самый простой способ сделать это - сохранить некоторое состояние, соответствующее тому, хотите ли вы привязать событие. (Вы, возможно, уже есть такой флаг!) Затем вы можете сделать что-то вроде:

onMouseMove={this.state.dragging ? null : this.moving} 

, а затем просто написать

this.setState({dragging: true}); 

в обработчике MouseDown.