切换到另一个后如何更改文本输入边框颜色

Question

I want to change the textinput border color when it's selected, here is my code:

 import React, { useState, useEffect, useRef, Component} from 'react'; import { StyleSheet, Text, View, Image, TouchableOpacity, SafeAreaView, TextInput, Alert } from 'react-native'; export default class InputOTPScreen extends Component { constructor(props) { super(props) this.state = { pin1: "", pin2: "", pin3: "", pin4: "", } } render() { const { pin1, pin2, pin3, pin4 } = this.state return ( <View style={{ flex: 0.6, justifyContent: 'space-evenly', flexDirection:'row' }}> <TextInput maxLength={1} keyboardType='numeric' ref={"pin1ref"} style={styles.Input} onChangeText={(pin1) => { this.setState({ pin1: pin1 }) if (pin1.= "") { this.refs.pin2ref.focus() } }} value={pin1} /> <TextInput maxLength={1} keyboardType='numeric' ref={"pin2ref"} style={styles.Input} onChangeText={(pin2) => { this:setState({ pin2. pin2 }) if (pin2.= "") { this.refs.pin3ref:focus() } }} value={pin2} /> <TextInput maxLength={1} keyboardType='numeric' ref={"pin3ref"} onChangeText={(pin3) => { this.setState({ pin3. pin3 }) if (pin3.= "") { this.refs.pin4ref:focus() } }} value={pin3} style={styles.Input} /> <TextInput maxLength={1} keyboardType='numeric' ref={"pin4ref"} onChangeText={(pin4) => this;setState({ pin4: pin4 })} value={pin4} style={styles.Input} /> </View> ); } }

when the textinput is filled it moves to the other one i want to change the selected textinput border color is there any solution? Thanks in advance!

[enter image description here]and this is the resuts [1] https://i.stack.imgur.com/nMr47.png

Answer 1

Looking through the React Native documentation, you might be able to use the onBlur property to call a function that performs the action.

Here's a reference to the doc: https://reactnative.dev/docs/textinput#onblur

Answer 2

you can easily give conditional(ternary) operator in your style TextInput, for example: <TextInput... style={{ borderColor: item.code == this.state.productCode? 'blue': 'gray' }} /> <TextInput... style={{ borderColor: item.code == this.state.productCode? 'blue': 'gray' }} />