React中如何按10位有效手机号输入条件设置按钮的禁用状态

错误原因 #

• 你在isValidPhoneNumber参数中混用了布尔判断fields.length<10，||运算符会直接把布尔值传入要求字符串入参的isValidPhoneNumber方法，触发类型错误
• 原有disabled的逻辑运算符使用错误，&&和!的组合不符合「任一不合法条件满足就禁用」的需求
• 你错误判断了fields数组的长度，而非手机号本身的长度，判断对象完全错误

解决方案 #

首先明确：react-phone-number-input提供的isValidPhoneNumber方法本身就会根据你设置的defaultCountry="US"规则校验号码合法性，美国合法手机号本身就要求10位本地号码，如果你没有特殊自定义校验要求，只靠这个方法就足够实现需求。
如果你需要额外强校验纯数字长度为10位（不含国家码前缀），可以先对手机号做格式化处理后再判断长度。

正确的disabled属性写法如下：

disabled={
  // 第一个输入框无值
  !fields[0]?.value 
  // 不是合法手机号
  || !isValidPhoneNumber(fields[0].value)
  // 可选：额外校验去掉所有非数字字符、去掉美国区号前缀1后的长度为10位，不需要可以直接删掉这行
  || fields[0].value.replace(/\D/g, '').replace(/^1/, '').length < 10
}

完整修正后的button代码 #

<button
  type="button"
  hidden={fields.length > 1}
  data-value={fields.length}
  disabled={
    !fields[0]?.value 
    || !isValidPhoneNumber(fields[0].value)
    || fields[0].value.replace(/\D/g, '').replace(/^1/, '').length < 10
  }
  onClick={() => handleAdd()}
>
  + Phone
</button>

内容的提问来源于stack exchange，提问作者Sougata Mukherjee