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

Question

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

现在，BOTH textInputs 的borderColor 正在改变。如何确保唯一获得更改的 textInput 是当前 onFocus 的？

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（toggle1 和 toggle2，如果你愿意的话）。因此，当您关注任何内容时，您的应用程序会更新状态，并且由于两个文本输入都根据 this.state.toggle 决定它们的颜色，它们都会改变它们的颜色。