如何在 React Native 中使用 onFocus 更改一个文本输入的边框颜色

Question

我目前正在尝试使用prop onFocus更改单个Textinput元素的边框颜色。 我正在使用一个包含两组样式的数组，第一个"styles.textInput"应该是第一个加载的样式。 第二个应该只在切换为真时加载，然后它应该加载第二个样式，即"styles.textInputAlt">

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

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'
  }
});

Answer 1

解决

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

//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')}
/>

Answer 2

你的代码虽然正确，但有一个问题。您正在跟踪任何文本输入是否聚焦，但是您应该分别跟踪每个文本输入的this.state.toggle(如果您愿意，可以切换 1 和 toggle2(。因此，当您关注应用程序更新状态的任何内容时，并且由于两个文本输入都根据this.state.toggle决定其颜色，因此它们都会更改其颜色。