javascript - React-Native 密码 textInput 的问题

Question

我创建了一个 textInput 组件供用户输入密码。

当用户输入密码时，密码显示为隐藏。

但是，当用户按下“显示密码”按钮时，我希望更改密码颜色以使其可见。

我有这个功能，但是当它执行时，它不会更改颜色，而是删除密码文本。

功能：

if (...) {
....
this.state.passTextColor = 'black';
....
}

任何帮助将非常感激！

标签： javascriptandroidreact-native

Answer 1

我根据您的要求创建了一个示例应用程序。

import React, { Component } from "react";
import { View, TextInput, Button, StyleSheet } from "react-native";

export default class Example extends Component {
  state = {
    password: "",
    isPasswordHide: true
  };

  onChangeText = text => {
    this.setState({
      password: text
    });
  };

  changePasswordVisibility = () => {
    this.setState({
      isPasswordHide: !this.state.isPasswordHide
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={
            this.state.isPasswordHide
              ? styles.textInput
              : [styles.textInput, { color: "#ED3C20" }]
          }
          onChangeText={this.onChangeText}
          placeholder="Enter Your Password"
          value={this.state.password}
          secureTextEntry={this.state.isPasswordHide}
        />
        <Button
          title={this.state.isPasswordHide ? "Show Password" : "Hide Password"}
          onPress={this.changePasswordVisibility}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  textInput: {
    width: "80%",
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    padding: 5,
    marginBottom: 10
  }
});

希望这对您有所帮助。随意怀疑。