我有一个表单,其中有大量的输入和更新按钮。我正在寻找禁用按钮的最佳方法,除非其中一个状态或输入发生更改。我知道如何使用布尔状态变量来保存按钮的禁用/启用状态。然后,在更改输入字段时,相应地将值设置为状态变量名称。
因为我有大量的状态。我需要写一段代码,它循环通过嵌套对象并进行比较。
我将非常感谢你的帮助
发布于 2018-08-15 10:59:40
如果我正确地理解了您的情况和代码,那么您只对在组件状态下验证certian变量感兴趣。
您可以通过向组件添加以下方法来实现所需的验证行为:
getCustomValidation() {
// Extract a list for validation on only the state fields that are
// relevance to the form validation
const fieldsToValidate = [
"ppvLimit",
"securityCode",
"primaryPhone",
"secondaryPhone",
"email",
"billingAddressLine1",
"billingAddressLine2",
"billingAddressCity",
"billingAddressTerritoryCode",
"billingAddressPostalCode",
"contactAddressLine1",
"contactAddressLine2",
"contactAddressCity",
"contactAddressTerritoryCode",
"contactAddressPostalCode",
"authorizedUser1",
"authorizedUser2",
"authorizedUser3",
"authorizedUser4"
];
// Iterate each field to check to determine if field is valid
for(const fieldToValidate of fieldsToValidate) {
// Extract value for current field
const value = this.state[ fieldToValidate ]
// If value is "truthy" then return valid (true)
if( !!value ) {
return true
}
}
// If none of the validation fields are valid, return false
return false;
}
要利用这一点,可以按如下方式更新render方法中的Submit组件:
<Button primary disabled={ !this.getCustomValidation() } type="submit">
{ loading ? <div><LoadingIcon size="lg" /> Saving...</div> : "Update" }
</Button>
https://stackoverflow.com/questions/51850096
复制相似问题