0
108
Vistas¿Cómo configurar la desactivación del botón en ciertas condiciones en reaccionar?
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> Botón interior dentro de la propiedad de desactivación si trato de dar la condición de que el botón esté deshabilitado hasta que el usuario proporcione un número de teléfono de 10 dígitos con la condición field.length < 10 . Lanza un error "Error de tipo: un texto para analizar debe ser una cadena". ¿Cuál debería ser la condición dentro del atributo de deshabilitación que hasta que el usuario proporcione el botón de número de teléfono de 10 dígitos debería deshabilitarse?
2 Respuestas
Responde la pregunta0
Si tuviera que adivinar aquí, parece que isValidPhoneNumber puede estar esperando un valor de cadena, pero si fields[0]?.value es falsey, y '' es obviamente falsey, se pasa el valor booleano fields.length < 10 . Sospecho que desea esta última condición fuera de la función de validación isValidPhoneNumber . También sospecho que desea verificar la longitud del valor, no la longitud de la matriz de campos.
disabled={ !isValidPhoneNumber(fields[0]?.value || "") || fields[0]?.value?.length < 10 } 
0
Creo que la última condición es verificar la longitud de la matriz en lugar de la longitud del primer valor de la matriz de campos, es decir fields[0].value .
Tratar de usar
disabled={!fields[0]?.value && !(isValidPhoneNumber(fields[0]?.value ||''||fields[0]?.value.length<10))}