tengo entrada de texto y botón de envío, al presionar el botón de envío comprueba si el nombre. la longitud es mayor que 2 si no lo es, entonces quiero cambiar el estilo de entrada de texto para que el color del borde del ejemplo sea rojo.
let name = '' return(<View> <TextInput onChangeText={(e)=>{name = e}} style={styles.textInput} placeholder='Name and Surname'/> <TouchableOpacity onPress={()=>{ if(name.length <= 2){ // What i need to write here to change the TextInput borderColor to red } }} > <Text style={styles.submitButton} >Submit</Text> </TouchableOpacity> </View>)Traté de hacer nameError - useState variable - y funciona, pero cuando nameError lo cambia, vuelve a representar el componente y el valor de TextInput va a estar vacío, pero quiero que el valor de TextInput sea exactamente el mismo, solo que cambie el borderColor
let name = '' let [nameError, setNameError] = useState(false) return(<View> <TextInput onChangeText={(e)=>{name = e}} style={nameError ? {...styles.textInput, borderColor: 'red'} : {...styles.textInput, borderColor: 'green'}} placeholder='Name and Surname'/> <TouchableOpacity onPress={()=>{ if(name.length <= 2){ setNameError(true) //This work and it change borderColor, but it chage value of useState state and component rerender and TextInput is going to be empty but i want to be the same as it was before i clicked submit button not to be empty } else{ setNameError(false) } }} > <Text style={styles.submitButton} >Submit</Text> </TouchableOpacity> </View>)Perdón por explicar mal, no sé muy bien inglés.
Debe agregar un estado para el nombre en lugar de configurarlo como una variable que modifica su código:
// DELETE THIS LINE let name = '' const [name, setName] = useState(''); //ADD this line and please note I added value={name} to TextInput let [nameError, setNameError] = useState(false) return(<View> <TextInput value={name} onChangeText={(e)=>{setName(e)}} style={nameError ? {...styles.textInput, borderColor: 'red'} : {...styles.textInput, borderColor: 'green'}} placeholder='Name and Surname'/> <TouchableOpacity onPress={()=>{ if(name.length <= 2){ setNameError(true) //This work and it change borderColor, but it chage value of useState state and component rerender and TextInput is going to be empty but i want to be the same as it was before i clicked submit button not to be empty } }} > <Text style={styles.submitButton} >Submit</Text> </TouchableOpacity> </View>)