Создание пользовательского компонента ввода с состояниями

Question

• 1000 1006 * проверить ввод: если текстовый ввод «заполнен текстом», тогда проверьте правильность проверки, если истина: измените цвет значка «V» и ButtomBorderColor на зеленый, если false: измените цвет значка «V» и ButtomBorderColor на красный, сохраните эти стили, пока inputField снова не станет пустым

import React from "react";
import { View, TextInput, StyleSheet, Text } from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import { MaterialCommunityIcons, AntDesign } from "@expo/vector-icons";

class RegisterTextBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      borderColor: "",
      isFocused: false,
    };
  }
  onBlur() {
    this.setState({ isFocused: false });
  }
  onFocus() {
    this.setState({ isFocused: true });
  }

  render() {
    const { isFocused } = this.state;
    const {
      value,
      placeholder,
      onChangeText,
      secureTextEntry,
      inputStyle,
      viewStyle,
      showIcon = this.state.showIcon,
      eyeIcon = false,
    } = this.props;
    return (
      <View style={[styles.container, viewStyle]}>
        <TextInput
          style={[styles.main, { borderBottomColor: this.state.borderColor }]}
          value={value}
          onChangeText={onChangeText}
          onBlur={() => this.onBlur()}
          onFocus={() => this.onFocus()}
          placeholder={placeholder}
          secureTextEntry={secureTextEntry}
          onChangeText={(val) => this.updateInputVal(val, "confirmPassword")}
        />
        {isFocused ? (
          <AntDesign
            name="checkcircle"
            size={18}
            color="black"
            style={{ paddingTop: 8 }}
          />
        ) : (
          <View />
        )}
        {eyeIcon ? (
          <MaterialCommunityIcons
            name="eye-off"
            size={24}
            color="black"
            style={{ paddingTop: 5, paddingLeft: 5 }}
          />
        ) : (
          <View />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: hp(5.4),
    width: wp(65.2),
    borderBottomWidth: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  main: {
    flex: 1,
  },
});

export default RegisterTextBox;

Answer 1

Я предлагаю вам сохранить значение состояния, чтобы знать, заполнено ли TextInput текстом или нет.

constructor(props) {
    super(props);
    this.state = {
      isTextFill: false,
      isFocused: false,
    };
}

Затем проверьте, было ли поле ввода заполнено текстом или нет, когда onChangeText триггеры. Я создал функцию для сохранения состояния и остальной части вашего кода, которая была обозначена onChangeText в TextInput.

onChangeTextEvent(text){
   if(text.length > 0){
      this.setState({
         isTextFill : true
      })
   } else {
      this.setState({
         isTextFill : false
      })
   }
   this.updateInputVal(text, "confirmPassword"); //the function that you had called. I don't know why and where that is. 
}

Затем вы можете использовать условный оператор для управления своим кодом.

return (
      <View style={[styles.container, viewStyle]}>
        <TextInput
          style={[styles.main, { borderBottomColor: this.state.isTextFill ? "green" : "red" }]}
          value={value}
          onBlur={() => this.onBlur()}
          onFocus={() => this.onFocus()}
          placeholder={placeholder}
          secureTextEntry={secureTextEntry}
          onChangeText={this.onChangeTextEvent.bind(this)}
        />
        {isFocused ? (
          <AntDesign
            name="checkcircle"
            size={18}
            color={this.state.isTextFill ? "green" : "red"}
            style={{ paddingTop: 8 }}
          />
        ) : (
          <View />
        )}
        {eyeIcon ? (
          <MaterialCommunityIcons
            name="eye-off"
            size={24}
            color={this.state.isTextFill ? "green" : "red"}
            style={{ paddingTop: 5, paddingLeft: 5 }}
          />
        ) : (
          <View />
        )}
      </View>
    );