I want to build an application which has two states; pause and active. For example I want to disable all children/owned ponents' events like onClick, onChange, onKeyDown, .etc.

I had thought to give isActive=false prop through all it's children/owned ponents and check for the property isActive on event handlers. If isActive property is falsy event handler will do nothing. I can make this mechanism even easier with a simple helper function. But my concern is when I changed the app state to paused, all children ponents needs to be re-rendered.

Im searching for a way to bypass all event handlers (not custom ones) without re render all ponents.

UPDATE: I watch rendering rectangles on chrome end it doesn't re render the children. But if there any better reacty way to do this I want to learn it.

I want to build an application which has two states; pause and active. For example I want to disable all children/owned ponents' events like onClick, onChange, onKeyDown, .etc.

I had thought to give isActive=false prop through all it's children/owned ponents and check for the property isActive on event handlers. If isActive property is falsy event handler will do nothing. I can make this mechanism even easier with a simple helper function. But my concern is when I changed the app state to paused, all children ponents needs to be re-rendered.

Im searching for a way to bypass all event handlers (not custom ones) without re render all ponents.

UPDATE: I watch rendering rectangles on chrome end it doesn't re render the children. But if there any better reacty way to do this I want to learn it.

• javascript
• reactjs

• 2 Have you considered a transparent (or very slightly opaque grey) absolute positioned div in front of the UI to "cover up" all the controls when paused? It would intercept all events. I don't know react, so not an answer. But its's easy in js. – bitfiddler Commented Oct 3, 2014 at 21:48
• Yes that was my second thought but events are not limited to mouse events. – Umur Gedik Commented Oct 3, 2014 at 21:58

2 Answers 2

One way to solve this is using a simple guard abstraction. It works like this:

var sayHi = guard("enabled", function(){
  alert("hi");
});

guard.deactivate("enabled");
sayHi(); // nothing happens
guard.activate("enabled");
sayHi(); // shows the alert

Using this for event handlers is similar:

handleChange: guard("something", function(e){
  // if 'something' is deactivated, the input won't change
  this.setState({value: e.target.value});
})

// or

return <div onClick={guard("something", this.handleClick)}>click me!</div>

Here's an implementation of guard

var guard = function(key, fn){
  return function(){
    if (guard.flags[key]) {
      return fn.apply(this, arguments);    
    } 
  };
};

guard.flags = {};
guard.activate = function(key){ guard.flags[key] = true };
guard.deactivate = function(key){ guard.flags[key] = false };

Set pointerEvents='none' in the styling of the container div. It'll disable all of the children. I know it from React Native, but it seems to work in React.js as well.