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

Posted 2023-04-18

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

【英文标题】：How do I change the borderColor of just one Textinput with onFocus in React Native?

【发布时间】：2018-06-23 23:09:25

【问题描述】：

我目前正在尝试使用道具 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'
  
);

【参考方案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')
/>

【参考方案2】：

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

【讨论】：

我不确定如何在 textInput 中跟踪 this.state.toggle。我应该通过 IF 语句来做吗？（这似乎不太可能）。还是在 hasFocus 方法中执行？

向状态添加一个新变量。在您的 hasFocus 和 lostFocus 方法中，将它们称为 () => this.hasFocus('first') 并在这些方法中创建一个 if 来切换新的或旧的切换变量。最后，在样式中，您的一个文本输入应该查看 this.state.toggle，另一个查看那里的新变量。

我添加了一个名为 toggleCheck 的新状态。我应该将其设置为“第一”吗？抱歉，我仍然对此感到困惑