Scribd
Upload
8 views

37.javascript - How to remove a specific event listener from a react.js element - Stack Overflow

To remove a specific event listener in React, you can manage the listener's attachment through component state. By setting a state variable (e.g., 'dragging'), you can conditionally render the event handler, allowing you to effectively add or remove the listener based on the state. This approach encourages a declarative style in React, ensuring that the component re-renders when the state changes.

Uploaded by

aiavig
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

37.javascript - How to remove a specific event listener from a react.js element - Stack Overflow

To remove a specific event listener in React, you can manage the listener's attachment through component state. By setting a state variable (e.g., 'dragging'), you can conditionally render the event handler, allowing you to effectively add or remove the listener based on the state. This approach encourages a declarative style in React, ensuring that the component re-renders when the state changes.

Uploaded by

aiavig
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

How to remove a specific event listener from a react.

js element

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

0 render:function(){
return (
<div id="all-highlights" class="highlight-container" onMouseDown={this.drag
<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?

javascript reactjs

share | improve this question asked Oct 14 at 21:21


asherrard
27 5
add comment

2 Answers active oldest votes

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

share | improve this answer answered Oct 17 at 6:29


Code Pirate
376 2 9
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 – asherrard Oct 17 at
21:35

add comment

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!)
1 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.

share | improve this answer answered Oct 14 at 22:38


Ben Alpert
21.8k 9 61 105
add comment

Your Answer

You might also like