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中状态值的约束

回答

相关问题