How to remove a specific event listener from a react.js element

Question

I'm using this simple render function with a few handlers:

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

                </div>
            </div>
        );
    }

Within the React.createClass function, using something like: this.removeTheListener function, how would I then remove the specific mouseMove function? Regardless of performance of the mouseMove function, I know that its resource heavy but for what I'm doing its the perfect event.

Is it possible to remove just a specific listener, and then once removed add it back at a different point in time?

Answer 1

As with everything in React, the key is to think declaratively. The simplest way to do this is to store some state corresponding to whether you want the event to be attached. (You might already have such a flag!) Then you can do something like:

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

and then simply write

this.setState({dragging: true});

in your mousedown handler.

Answer 2

In React, if you want to change something (attribute, listener, etc..), you should force the component to re-render by updating the state. Then you render based on that state.

Here is a piece of code that should work for you:

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() {
    // ...
  }

});