如何在某些情况下设置按钮禁用反应？

Question

import PhoneInput, { formatPhoneNumber, formatPhoneNumberIntl, isValidPhoneNumber } from 'react-phone-number-input';

const [fields, setFields] = React.useState([{ value: null }]);

<PhoneInput
  id="phoneNumbers1"
  type="text"
  placeholder="Enter phone number "
  value={field.value || ""}
  defaultCountry="US"
  international
  name="phoneNumbers"
  error={disable}
  autoComplete='off'
  onBlur={formik.handleBlur}
  onChange={(e) => handleChange(idx, e)}
  onClick={() => setIndex(idx)}
/>
<button
  type="button"
  hidden={fields.length > 1}
  data-value={fields.length}
  disabled={!fields[0]?.value && !(isValidPhoneNumber(fields[0]?.value ||''||fields.length<10))}
  onClick={() => handleAdd()}
>
  + Phone
</button>

如果我尝试给出该按钮被禁用的条件，直到用户给出条件field.length < 10的 10 位电话号码，则内部按钮内部的禁用属性。 它会引发错误“TypeError：用于解析的文本必须是字符串。” 在用户提供 10 位电话号码按钮之前，禁用属性内的条件应该是什么？

Answer 1

如果我不得不在这里猜测，似乎isValidPhoneNumber可能需要一个字符串值，但如果fields[0]?.value为假，而''显然是假的，则 boolean fields.length fields.length < 10值被传递。 我怀疑您希望在isValidPhoneNumber验证器 function 之外使用最后一个条件。 我还怀疑您要检查值的长度，而不是字段数组的长度。

disabled={
  !isValidPhoneNumber(fields[0]?.value || "") ||
  fields[0]?.value?.length < 10
}

Answer 2

我认为最后一个条件是检查数组的长度，而不是字段数组的第一个值的长度，即fields[0].value 。

尝试使用

disabled={?fields[0].?value &&.(isValidPhoneNumber(fields[0]?.value ||''||fields[0]..value.length<10))}