在react.js有什麼辦法可以禁用所有的兒童活動

我想建立一個具有兩種狀態的應用程序;暫停和活躍。例如，我想禁用所有兒童/擁有組件的事件，如onClick，onChange，onKeyDown，.etc。在react.js有什麼辦法可以禁用所有的兒童活動

我曾想過要通過它的所有孩子/自有組件檢查isActive=false道具，並檢查事件處理程序上的屬性isActive。如果isActive屬性是falsy事件處理程序將無能爲力。我可以通過一個簡單的輔助函數使這個機制更容易。但我擔心的是，當我將應用程序狀態更改爲暫停狀態時，所有子組件都需要重新呈現。

我正在尋找一種方法來繞過所有事件處理程序（不是自定義的），而無需重新渲染所有組件。

更新：我觀看渲染矩形鉻終結它不會呈現子。但如果有更好的反應方式來做到這一點，我想學習它。

來源

2014-10-03 Umur Gedik

你有沒有考慮一個透明（或略微不透明的灰色）在用戶界面前絕對定位div以在暫停時「掩蓋」所有控件？它會攔截所有事件。我不知道有什麼反應，所以沒有答案。但它在js中很容易。 – bitfiddler 2014-10-03 21:48:37

是的，這是我的第二個想法，但事件不限於鼠標事件。 – 2014-10-03 21:58:57

解決此問題的一種方法是使用簡單的保護抽象。它的工作原理是這樣的：

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

來源

2014-10-03 23:31:30 FakeRainBrigand

簡單而優雅的解決方案，非常感謝！ – 2014-10-04 13:25:16

在react.js有什麼辦法可以禁用所有的兒童活動

回答

相關問題