如何在某些情況下設置按鈕禁用反應？

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