React native 如何在react native中每次集中一个文本输入？

我有3种不同的文本输入，文本输入1，文本输入2和文本输入3

我希望当我点击textinput1时，他的边框颜色是蓝色的，我做到了，并且工作正常

我现在想要的是，当我点击textinput2到textinput1时，回到原来的颜色，textinput2现在变成蓝色

照片上的例子

这是我的代码：

state = { isFocused: true };

 onFocusChange = () => {
this.setState({ isFocused: false });
}

render() {

return (

  <View style={styles.container}>
    <Text style={styles.headline}>Website ou App</Text>

    //TEXTINPUT1

    <TextInput
      onFocus={this.onFocusChange}
      style={(this.state.isFocused) ? {marginTop: 5, height: 40, borderWidth: 2, borderRadius: 5, borderColor: 'gray'} :  {marginTop: 5, height: 40, borderWidth: 2, borderRadius: 5, borderColor: '#00b7eb'}}
      onChangeText={(text) => this.setState({ site: text })}
      value={this.state.site}

    //TEXTINPUT2

    <Text style={styles.headline}>Utilizador/Email</Text>
    <TextInput
      style={{ marginTop: 5, height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={(text) => this.setState({ local: text })}
      value={this.state.local}

    />

state={isFocused:true}；
onFocusChange=（）=>{
this.setState（{isFocused:false}）；
}
render（）{
返回(
网站ou应用程序
//文本输入1
this.setState（{site:text}）}
值={this.state.site}
//文本输入2
实用程序/电子邮件
this.setState（{local:text}）}
值={this.state.local}
/>

---

知道我该怎么做吗？谢谢。

一个选项是跟踪聚焦文本输入的名称。您需要确保在

blur

事件中使用更新程序版本的

setState

，以避免两个输入的

onBlur

和

onFocus

方法之间出现竞争条件：

 state = { focusedInput: null };

 onFocusChange = (inputName) => {
   this.setState({focusedInput: inputName});
 }
 onBlurChange = (inputName) => {
   this.setState(state => {
     if (state.focusedInput === inputName) {
       return {focusedInput: null};
     }
     // no change if some other input already has focus
     return null;
   }
 }

render() {

return (

  <View style={styles.container}>
    <Text style={styles.headline}>Website ou App</Text>

    //TEXTINPUT1

    <TextInput
      onFocus={() => this.onFocusChange("input1")}
      onBlur={() => this.onBlurChange("input1")}
      style={(this.state.focusedInput === "input1") ? {marginTop: 5, height: 40, borderWidth: 2, borderRadius: 5, borderColor: 'gray'} :  {marginTop: 5, height: 40, borderWidth: 2, borderRadius: 5, borderColor: '#00b7eb'}}
      onChangeText={(text) => this.setState({ site: text })}
      value={this.state.site} />

state={focusedInput:null}；
onFocusChange=（inputName）=>{
this.setState（{focusedInput:inputName}）；
}
onBlurChange=（inputName）=>{
this.setState（state=>{
if（state.focusedInput==inputName）{
返回{focusedInput:null}；
}
//如果某些其他输入已具有焦点，则不进行更改
返回null；
}
}
render（）{
返回(
网站ou应用程序
//文本输入1
this.onFocusChange（“input1”）}
onBlur={（）=>this.onBlurChange（“input1”）}
style={（this.state.focusedInput==“input1”）？{marginTop:5，高度：40，borderWidth:2，borderRadius:5，borderColor:'gray'}:{marginTop:5，高度：40，borderWidth:2，borderRadius:5，borderColor:'#00b7eb'}
onChangeText={（text）=>this.setState（{site:text}）}
值={this.state.site}/>

---

对名称不同于“input1”的其他输入重复此操作。

我认为最简单的方法就是创建自己的自定义组件来处理边界线。我已经创建了一个expo零食，供您查看解决方法（前面提到的除外）

无论如何，这是代码

//somefile.js
import React, {useState} from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import Constants from 'expo-constants';

export default App = () => {
  const [isInputFocused, setInputFocused] = useState({input1: false, input2: false})
    return (
      <View style={styles.container}>
    <TextInput
      onFocus={() => setInputFocused((prev) => ({...prev, input1: true}))}
      onBlur={() => setInputFocused((prev) => ({...prev, input1: false}))}
      style={isInputFocused.input1 ? styles.input : styles.inputFocused }
      onChangeText={() => {}}/>

    <TextInput
      style={isInputFocused.input2 ? styles.input : styles.inputFocused }
      onChangeText={() => {}}
      onFocus={() => setInputFocused((prev) => ({...prev, input2: true}))}
      onBlur={() => setInputFocused((prev) => ({...prev, input2: false}))}
    />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  inputFocused: {
    marginTop: 5,
    height: 40, 
    borderWidth: 2, 
    borderRadius: 5,
    borderColor: 'grey'
  },
  input: {
    marginTop: 5,
    height: 40, 
    borderWidth: 2, 
    borderRadius: 5,
    borderColor: '#00b7eb'
  }
});

//somefile.js
从“React”导入React，{useState}；
从“react native”导入{Text，View，StyleSheet，TextInput}；
从“expo常量”导入常量；
导出默认应用=（）=>{
const[isInputFocused，setInputFocused]=useState（{input1:false，input2:false}）
返回(
setInputFocused（（prev）=>（{…prev，input1:true}）
onBlur={（）=>setInputFocused（（prev）=>（{…prev，input1:false}）
style={isInputFocused.input1？styles.input:styles.inputFocused}
onChangeText={（）=>{}/>
{}}
onFocus={（）=>setInputFocused（（prev）=>（{…prev，input2:true}）
onBlur={（）=>setInputFocused（（prev）=>（{…prev，input2:false}））}
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
},
以输入为中心：{
玛金托普：5，
身高：40，
边界宽度：2，
边界半径：5，
边框颜色：“灰色”
},
输入：{
玛金托普：5，
身高：40，
边界宽度：2，
边界半径：5，
边框颜色：“#00b7eb”
}
});

---

另外，我刚刚添加了React钩子。我鼓励您使用它们，因为代码简化了很多。更多信息是关于钩子的。创建自定义文本输入组件，该组件将在“onFocus”和“onBlur”的帮助下将组件中的“borderColor”设置为“black”或“blue”通过这种方式，您可以在父级中不带任何条件地使用多个文本输入

示例代码

import React from "react";
import { SafeAreaView, TextInput, Text } from "react-native";

class CustomTextInput extends React.Component {
  state = { hasFocus: false };

  _onFocus = () => {
    this.setState({ hasFocus: true });
  };

  _onBlur = () => {
    this.setState({ hasFocus: false });
  };

  render() {
    const borderColor = this.state.hasFocus ? "blue" : "black";
    return (
      <TextInput
        style={{ padding: 16, borderColor: borderColor, borderWidth: 1 }}
        onFocus={this._onFocus}
        onBlur={this._onBlur}
      />
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Text style={{ marginTop: 16, textAlign: "center" }}>Website App</Text>
        <CustomTextInput />
        <Text style={{ marginTop: 16, textAlign: "center" }}>Email</Text>
        <CustomTextInput />
        <Text style={{ marginTop: 16, textAlign: "center" }}>Password</Text>
        <CustomTextInput />
      </SafeAreaView>
    );
  }
}

从“React”导入React；
从“react native”导入{SafeAreaView，TextInput，Text}；
类CustomTextInput扩展了React.Component{
状态={hasFocus:false}；
_onFocus=（）=>{
this.setState（{hasFocus:true}）；
};
_onBlur=（）=>{
this.setState（{hasFocus:false}）；
};
render（）{
const borderColor=this.state.hasFocus？“蓝色”：“黑色”；
返回(
);
}
}
导出默认类App扩展React.Component{
render（）{
返回(
网站应用程序
电子邮件
密码
);
}
}

应用程序预览

---

**我们可以使用开关盒和方法控制多个文本输入**

\u onFocusTo=（数据）=>{
常数{
过量，
弹跳球，
惩罚者，
过度收费，
征收提货费，
ebcCharges，
止赎金额，
数量
}=本州；
控制台日志（“焦点”）；
交换机（数据）{
案例1：{
如果（金额=“0”）{
this.setState（{amount:}）
}
}中断；
案例2：{
如果（bounceCharges==“0”）{
this.setState（{bounceCharges:“}）
}
}中断；
案例3：{
如果（penalInterest==“0”）{
this.setState（{penalInterest:“}）
}
}中断；
案例4：{
如果（止赎金额==“0”）{
this.setState（{止赎金额：“}）
}
}中断；
案例5：{
如果（ebcCharges==“0”）{
this.setState（{ebcCharges:“}）
}
}中断；
案例6：{
如果（收款收取费用==“0”）{
this.setState（{collectionPickupCharge:“}）
}
}中断；
}
}
/在Textinput中生成函数并将其传递给onFocus
这个。_onFocusTo（1）}
onBlur={this.addTotal}
onChangeText={（金额）=>this.setAmountDes（金额）}
值={this.state.amount}
/>
这个._onFocusTo（2）}
onBlur={this.addTotal}
键盘类型={“数字”}
o
const [focus, setFocus] = useState(false);

<TextInput
    style={focus ? styles.inputOnFocus : styles.inputOnBlur}
    onFocus={() => setFocus(true)}
    onBlur={() => setFocus(false)}
/>

const styles = StyleSheet.create({
    inputOnFocus: { borderColor: '#C0C0C0' },
    inputOnBlur: { borderColor: '#4b6cd5' }
});