在 react.js 有沒有辦法禁用所有子事件

Question

我想構建一個具有兩種狀態的應用程序； 暫停和活動。 例如，我想禁用所有子/擁有組件的事件，如 onClick、onChange、onKeyDown、.etc。

我isActive=false通過它的所有子/擁有的組件提供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。