在react.js中有任何方法可以禁用所有子事件

Question

我想构建一个有两种状态的应用程序; 暂停和活跃.例如,我想禁用所有子/拥有组件的事件,如onClick,onChange,onKeyDown,.etc.

我曾想过isActive=false通过它所有的孩子/拥有的组件给予道具,并isActive在事件处理程序上检查属性.如果isActive属性是假的事件处理程序将什么都不做.我可以使用简单的辅助函数使这个机制更容易.但我担心的是,当我将应用程序状态更改为暂停时,所有子组件都需要重新呈现.

我正在寻找绕过所有事件处理程序(而不是自定义处理程序)而不重新渲染所有组件的方法.

更新:我看到在chrome端渲染矩形它不会重新渲染孩子.但如果有更好的反应方式,我想学习它.

Answer 1

解决这个问题的一种方法是使用简单的防护抽象.它的工作原理如下:

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

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

将此用于事件处理程序是类似的:

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>

这是一个守卫的实现

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 };