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?

Sophie Alpert · Accepted Answer · 2013-10-14 22:38:34Z

11

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.

answered Oct 14, 2013 at 22:38

Sophie Alpert

144k37 gold badges229 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mouad Debbar · Accepted Answer · 2013-10-17 06:29:12Z

8

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

});

answered Oct 17, 2013 at 6:29

Mouad Debbar

3,2462 gold badges22 silver badges22 bronze badges

1 Comment

asherrard Over a year ago

what you posted is pretty much how I set mine up, I swapped Ben's null and this.moving function around. And that did the trick. Both of these are good answers, but yours adds more context I feel

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related