Question

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

我原本想过通过所有孩子/拥有的组件给isActive=false道具，并在事件处理程序上检查属性isActive。如果isActive属性为falsy，则事件处理程序将不执行任何操作。我可以使用简单的辅助函数使这个机制更容易。但我担心的是当我将应用程序状态更改为暂停时，所有子组件都需要重新呈现。

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

更新：我看到在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>

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

Answer 2

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

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

2 个答案: