首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >当React JS中的状态或输入值发生变化时,如何禁用按钮?

当React JS中的状态或输入值发生变化时,如何禁用按钮?
EN

Stack Overflow用户
提问于 2018-08-15 05:35:34
回答 1查看 1.6K关注 0票数 1

我有一个表单,其中有大量的输入和更新按钮。我正在寻找禁用按钮的最佳方法,除非其中一个状态或输入发生更改。我知道如何使用布尔状态变量来保存按钮的禁用/启用状态。然后,在更改输入字段时,相应地将值设置为状态变量名称。

因为我有大量的状态。我需要写一段代码,它循环通过嵌套对象并进行比较。

我将非常感谢你的帮助

EN

回答 1

Stack Overflow用户

发布于 2018-08-15 10:59:40

如果我正确地理解了您的情况和代码,那么您只对在组件状态下验证certian变量感兴趣。

您可以通过向组件添加以下方法来实现所需的验证行为:

代码语言:javascript
复制
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组件:

代码语言:javascript
复制
<Button primary disabled={ !this.getCustomValidation() } type="submit">
{ loading ? <div><LoadingIcon size="lg" /> Saving...</div> : "Update" }
</Button>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51850096

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档