Css 如何使用React Native中的onFocus更改一个Textinput的边框颜色？

我目前正在尝试使用prop onFocus更改单个Textinput元素的边框颜色。我使用的数组包含两组样式，第一个“style.textInput”应该是第一个加载的样式。第二个应仅在toggle为true时加载，然后加载第二个样式，即“styles.TextInputLT”

现在，两个文本输入的边框颜色都在变化。我如何确保得到更改的唯一文本输入是当前焦点上的文本输入

import React, {Component} from 'react';
import  {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  TouchableHighlight,
  View,

} from 'react-native';

export default class Highlight extends Component{
    constructor(){
        super()
        this.state = {
            toggle: false,
        }
    }

    hasFocus(){
        this.setState({
            toggle: !this.state.toggle
        })
    }

    lostFocus(){
        this.setState({
            toggle:this.state.toggle,
        })

    }
    render(){
        return(
            <View style={styles.container}>
                <TextInput 
                    style={[styles.textInput, this.state.toggle && styles.textInputAlt]}
                    onFocus={()=>this.hasFocus()}  
                    onBlur={()=>this.lostFocus()}
                    /> 

                <TextInput
                    style={[styles.textInput, this.state.toggle && styles.textInputAlt]}
                    onFocus={()=>this.hasFocus()}
                    onBlur={()=>this.lostFocus()}

                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',

  },
  textInput: {
    borderColor: '#000',
    borderWidth: 2.0,
    backgroundColor: '#fff',
    height: 40,
    marginLeft: 60,
    marginRight: 60,
    marginBottom: 30,
    padding: 2,
  },
  textInputAlt: {
    borderColor: '#e71636',
  },
  button: {
    height: 50,
    backgroundColor: '#48bbec',
    alignSelf: 'stretch',
    marginTop: 10,
    marginLeft: 60,
    marginRight: 60,
    justifyContent: 'center'
  },
  buttonText: {
    fontSize: 22,
    color: '#FFF',
    alignSelf: 'center'
  }
});

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
文本输入，
触控高光，
看法
}从“反应本机”；
导出默认类高亮显示扩展组件{
构造函数（）{
超级（）
此.state={
切换：false，
}
}
hasFocus（）{
这是我的国家({
切换：！this.state.toggle
})
}
lostFocus（）{
这是我的国家({
切换：this.state.toggle，
})
}
render（）{
返回(
this.hasFocus（）}
onBlur={（）=>this.lostFocus（）}
/> 
this.hasFocus（）}
onBlur={（）=>this.lostFocus（）}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
为内容辩护：“中心”，
对齐项目：“居中”，
},
文本输入：{
边框颜色：“#000”，
边框宽度：2.0，
背景颜色：“#fff”，
身高：40，
marginLeft:60，
marginRight:60，
marginBottom:30，
填充：2，
},
文本输入：{
边框颜色：'#e71636'，
},
按钮：{
身高：50，
背景颜色：“#48bbec”，
自我定位：“拉伸”，
玛金托普：10，
marginLeft:60，
marginRight:60，
为内容辩护：“中心”
},
按钮文字：{
尺寸：22，
颜色：“#FFF”，
自我定位：“中心”
}
});

您的代码虽然正确，但有一个问题。您正在跟踪任何文本输入是否聚焦，但是您应该分别跟踪

此.state.toggle

（如果愿意，请切换1和2）。因此，当您关注应用程序更新状态的任何内容时，由于两个文本输入都基于

this.state.toggle

决定其颜色，因此它们都会更改颜色。

解决这种情况的简单方法是使用参数，下面是一个非常基本的示例：

//Methods
handlerFocus = (input) => {
    this.setState({
        [input]:true
     });
};

handlerBlur = (input) => {
    this.setState({
        [input]:false
    });
};

// In render method         
<TextInput
    style= {[
        styles.textInput,
        this.state.nameInputOneFocus?styles.textInputFocus:''
    ]}
    onFocus = {() => this.handlerFocus('nameInputOneFocus')}
    onBlur = {() => this.handlerBlur('nameInputOneFocus')}
/>

<TextInput
    style= {[
        styles.textInput,
        this.state.nameInputTwoFocus?styles.textInputFocus:''
    ]}
    onFocus = {() => this.handlerFocus('nameInputTwoFocus')}
    onBlur = {() => this.handlerBlur('nameInputTwoFocus')}
/>

//方法
handlerFocus=（输入）=>{
这是我的国家({
[输入]：真
});
};
handlerBlur=（输入）=>{
这是我的国家({
[输入]：假
});
};
//在渲染方法中
this.handlerFocus（'nameInputOneFocus'）}
onBlur={（）=>this.handlerBlur（'nameinputoneofocus'）}
/>
this.handlerFocus（'nameInputWoFocus'）}
onBlur={（）=>this.handlerBlur（'nameInputWoFocus'）}
/>

我不确定如何在textInput中跟踪this.state.toggle。我应该通过IF语句来做吗？（这似乎不太可能）。或者在hasFocus方法中执行？向state添加一个新变量。在hasFocus和lostFocus方法中，将它们称为this.hasFocus（'first'），并在这些方法中创建一个if来切换新的或旧的切换变量。最后，在样式中，一个文本输入应该查看this.state.toggle，另一个应该查看新变量。我是否应该将其设置为“第一”。对不起，我还是不明白