当状态或输入值在ResponseJS中发生更改时,如何禁用按钮?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (97)

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

因为我有很多州。我需要编写一个代码,通过嵌套的对象循环并进行比较。

提问于
用户回答回答于

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

通过将以下方法添加到组件中,可以实现所需的验证行为:

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

要利用这一点,你可以按照以下方式更新渲染方法中的Submit组件:

<Button primary disabled={ !this.getCustomValidation() } type="submit">
{ loading ? <div><LoadingIcon size="lg" /> Saving...</div> : "Update" }
</Button>
用户回答回答于

我不明白为什么boolean方法不好。

无论如何,可以使用存档将以前的模型对象与当前状态进行比较。_.isEqual函数检查数据是否已更改。

所属标签

可能回答问题的人

  • 找虫虫

    6 粉丝0 提问3 回答
  • 朝夕熊博客

    1 粉丝2 提问3 回答
  • gulu丶咕噜

    0 粉丝1 提问3 回答
  • 女淘日记

    杭州吱吱吱科技 · 站长 (已认证)

    1 粉丝1 提问3 回答

扫码关注云+社区

领取腾讯云代金券