CODEWITHSUNDEEP
javascriptreactjs
asherrard
asherrard

Reputation: 683

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

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?

Upvotes: 4

Views: 9790

Answers (2)

Mouad Debbar
Mouad Debbar

Reputation: 3226

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

});

Upvotes: 8

Sophie Alpert
Sophie Alpert

Reputation: 143114

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.

Upvotes: 11

Related Questions