如何每次在本机上集中一个文本输入？

Question

我有3种不同的textinput， textinput1 ， textinput2 和 textinput 3 。

我希望当我单击 textinput1 时，他的边框颜色为蓝色，我做到了并且可以工作。

我现在想要的是，当我单击 textinput2 到 textinput1 时，恢复为原始颜色，而 textinput2 现在变为蓝色。

照片上的示例。

Example

这是我的代码：

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}

    />

有些想法我该怎么做？谢谢。

Answer 1

与here共享相同的答案。

在组件中设置文本输入及其样式。然后在组件中使用state来控制您的样式。

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

Answer 2

一个选项是跟踪聚焦的TextInput的名称。您需要确保在setState事件中使用blur的更新程序版本，以避免两个输入的onBlur和onFocus方法之间的竞争状况：< / p>

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

重复其他名称与“ input1”不同的输入。

Answer 3

我认为最简单的方法就是创建自己的自定义组件来处理边界线。我创建了一个博览会小吃，供您查看解决方法（前面提到的除外）。 https://snack.expo.io/@ianvasco/e8efb0。

反正这里是代码。

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

我还添加了React Hooks。我鼓励您使用它们，因为代码简化了很多。 Here更多关于Hooks

Answer 4

创建自定义TextInput组件，借助“ onFocus”和“ onBlur”事件将组件中的“ borderColor”设置为“ black”或“ blue”。这样，您可以使用多个TextInput，而无需在父级中添加任何条件

示例代码

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

应用预览

Answer 5

**我们可以使用Switch的大小写和方法来控制多文本输入**

{
   "error":{
      "cause":"INVALID_REQUEST",
      "explanation":"Directly providing cardholder data is not supported. Consider using a session or token."
   },
   "result":"ERROR"
}