React.js中狀態值的約束

我有一個名爲zoom的狀態鍵，它的值可以在0到100之間。有沒有一種方法可以對這些值進行約束？React.js中狀態值的約束

因爲知道我做的新方法（但它看起來過度設計）：

```

<Component onChange={this.handleOnchange}/> 

handleOnChnage(value){ 
//instead of this.setState({zoom:value}); 
this.setZoomState(value);//where I check the value and make the constaints 
}

沒有任何條件限制向國家申請按鍵更優雅的解決方案？

來源

2015-11-10 user237329

如果你認爲你需要做的是提供了答案，那麼這將是的方式。 –

您總是需要在某處設置約束，並將驗證應用於某處的輸入值。「做這件事的最佳地點」或「更優雅的解決方案」取決於上下文：您需要在哪些地點和多少地點進行相同的驗證？是全球範圍的0和100的邊界還是用戶/平臺的依賴？你在多少地方更新了需要應用驗證的狀態？ – wintvelt

它可能看起來像這樣。

handleOnChange(event){ 
 
    var newValue = this.checkZoomValue(event.target.value); 
 
    this.setState({zoom:newValue}); 
 
} 
 
checkZoomValue(value) { 
 
    var outValue = min(value, 100) 
 
    outValue = max(value, 0); 
 
    return outValue; 
 
}

來源

2015-11-10 16:58:29

每次使用setState時仍然需要注意約束：（ – user237329

做到這一點的最佳方式取決於約束的複雜性。

如果約束是非常簡單的，你可以做內聯，就像這樣：

this.setState ({ zoom : min(100, max(value, 0)) });

有點更具可讀性是這樣的：

var validatedZoom = min(100, max(value, 0)); 
this.setState({ zoom : validatedZoom });

如果驗證更復雜（例如，用於生成消息用戶），或者如果驗證需要可重用，則單獨的驗證功能可能是最好的選擇。在簡單的例子：

function validatedZoom(value) { 
    return min(100, max(value, 0)); 
} 
// elsewhere 
this.setState({ zoom : validatedZoom(value) });

或者通過@janakastevens

來源

2015-11-10 21:40:44 wintvelt

這意味着你必須做'var validatedZoom = min（100，max（value，0））;'在你設置縮放的每個位置重複bussins邏輯不是一個明智的步驟 – user237329

取決於你的設置/可讀性要求我猜，答案中的例子符合問題的（有限的）複雜性。「重複業務」邏輯將適用，例如，如果你在多個地方執行setState 。在這種情況下 - >單獨的驗證功能。複雜的驗證？ - >單獨的驗證功能。我更新了我的答案只是爲了確保.. – wintvelt

React.js中狀態值的約束

回答

相關問題