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

我想构建一个有两种状态的应用程序；暂停并激活。例如，我想禁用所有子/所有组件的事件，如onClick、onChange、onKeyDown等

我曾想通过它的所有子组件/拥有的组件提供

isActive=false

prop，并检查事件处理程序上的属性

isActive

。如果

isActive

属性为falsy，则事件处理程序将不执行任何操作。我可以通过一个简单的助手函数使这个机制变得更加简单。但我担心的是，当我将应用程序状态更改为暂停时，所有子组件都需要重新渲染

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

---

更新：我在chrome end上观看渲染矩形，但不会重新渲染子对象。但是如果有更好的反应方式，我想学习它。

解决这个问题的一个方法是使用一个简单的保护抽象。它的工作原理如下：

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>

---

在容器div的样式中设置

pointerEvents='none'

。它将禁用所有子项。我从React Native知道它，但它似乎在React.js中也能工作。

您是否考虑过在UI前面放置一个透明（或略不透明的灰色）的绝对位置div，以便在暂停时“覆盖”所有控件？它将拦截所有事件。我不知道反应如何，所以没有答案。但在js中很容易。是的，这是我的第二个想法，但事件并不限于鼠标事件。

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