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

【问题标题】：In react.js is there any way to disable all children events在 react.js 中是否有任何方法可以禁用所有子事件
【发布时间】：2014-11-28 23:57:52
【问题描述】：

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

我曾想过通过它的所有子/拥有的组件提供isActive=false 属性，并检查事件处理程序上的属性isActive。如果isActive 属性是假的，事件处理程序将什么也不做。我可以通过一个简单的辅助函数使这个机制变得更容易。但我担心的是，当我将应用状态更改为暂停时，所有子组件都需要重新渲染。

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

更新：我在 chrome 端看到渲染矩形，它不会重新渲染孩子。但是如果有更好的反应方式来做到这一点，我想学习它。

【问题讨论】：

您是否考虑过在 UI 前面放置一个透明（或非常不透明的灰色）绝对定位的 div，以便在暂停时“遮盖”所有控件？它会拦截所有事件。我不知道反应，所以没有答案。但是在js里面很简单。
是的，这是我的第二个想法，但事件不仅限于鼠标事件。

标签： javascript reactjs react-jsx

【解决方案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 };

【讨论】：

【解决方案2】：

在容器 div 的样式中设置 pointerEvents='none'。它会禁用所有的孩子。我从 React Native 知道它，但它似乎也适用于 React.js。

【讨论】：