Para aclarar esta pregunta. Tengo dos campos de entrada, a veces uno de los campos de entrada ya está completado en función de si es usuario o invitado. Si ambos invitados están vacíos, ingrese texto en ambas entradas, el botón se habilitará. Sin embargo, si es usuario, uno de los campos de entrada ya está poblado con dicho nombre, pero el botón aún está deshabilitado cuando ingresé texto en el otro campo. Parece que el campo de entrada rellenado previamente todavía se considera vacío incluso si ya hay valor dentro de él. ¿Cómo solucionas esta situación?
const [confirmNumber, setConfirmNumber] = useState(''); const [lastName, setLastName] = useState(''); const [validNumber, setValidNumber] = useState(true); const [validName, setValidName] = useState(true); const [isButtonDisabled, setIsButtonDisabled] = useState(true); const confirmNumberHandler = (val: string) => { setConfirmNumber(val); setValidNumber(true); }; const lastNameHandler = (val: string) => { setLastName(val); setValidName(true); }; const buttonDisable = () => { if (confirmNumber !== '' && lastName !== '') { return false; //the bottom if statement doesn't seem to work :( any other solutions? } else if (confirmNumber !== '' && lastName === name) { return false; } return true; }; <InputField autoFocus onChangeText={confirmNumberHandler} error={!validNumber} /> </View> <View style={styles.viewMargin}> <InputField // I haven't created any condition for this value this is a just a hard coded string. to test if there's value already there. value={name} onChangeText={lastNameHandler} error={!validName} /> </View> <View style={styles.buttonStyle}> <PrimaryButton showLoading={loading} disabled={buttonDisable()} onPress={() => { lookUpHandler(); }}> </PrimaryButton>Pasa el name a la propiedad de value de InputField como puede ver en este fragmento de código proporcionado.
<InputField value={name} onChangeText={lastNameHandler} error={!validName} /> Pero el name no es un estado en su componente, sino el lastName que está utilizando para verificar las condiciones, así como el estado que está configurando en onChangeText , por lo tanto, debe asignar el estado en el que desea que la propiedad de value de su InputField almacene el text in para ser un estado en su componente.
Para decirlo en otras palabras: su InputField nunca almacena el valor real en el estado correcto.
Puede arreglar esto de la siguiente manera.
<InputField value={lastName} onChangeText={lastNameHandler} error={!validName} /> Para proporcionar un valor inicial a su InputField , debe pasarlos como un apoyo a su componente de la siguiente manera.
const MyForm = ({initalName}) => { const [lastName, setLastName] = useState(initialName); }En el contenedor principal, pasa el valor inicial al componente. Esto podría verse de la siguiente manera.
const MainScreen = () => } return ( <MyForm initialName={"Max"} /> ) } Si su formulario maneja esto por sí solo usando alguna llamada a la API, entonces podría hacerlo inicialmente en un useEffect en el primer procesamiento.
const MyForm = () => { const [lastName, setLastName] = useState(''); useEffect(() => { someApiCallForLastName().then(response => setLastName(response.lastName)) }, [setLastName]) }