javascript - react native 密码字段切换不起作用

我需要在密码textinput上切换secureTextEntry，以便用户可以看到他们在写什么。

有趣的是，当我使用导出默认类使某些组件扩展但我无法发布用户名和密码时，我使它起作用。
这是我的代码。

const AuthForm = ({ errorMessage, onSubmit }) => {
    const [vCellphone, setvCellphone] = useState('');
    const [vPassword, setvPassword] = useState('');


    onPassPress = () => {
      this.setState({
        secureTextEntry: !this.state.secureTextEntry
      });
    }

  return (
    <View style={styles.container}>
        <Image style={styles.logo} source={require('../assets/Logotipo-All.png')} />
        <Text style={styles.textIniciar}>Iniciar sesión</Text>
        <Text style={styles.textIniciar}> </Text>
        <View style={styles.inputContainer}>
        <TextInput style={styles.inputs}
            placeholder="Teléfono"
            underlineColorAndroid='transparent'
            onChangeText={newvCellphone => setvCellphone(newvCellphone)}
            keyboardType={'numeric'}
            value={vCellphone}
            autoCorrect={false}
            />
        </View>

        <View style={styles.inputContainer}>
        <TextInput style={styles.inputs}
            placeholder="Contraseña"
            secureTextEntry={this.state.secureTextEntry}
            underlineColorAndroid='transparent'
            onChangeText={newvPassword => setvPassword(newvPassword)}
            value={vPassword}
            autoCorrect={false}
            />
        <TouchableOpacity  onPress={this.onPassPress}>
            <Image style={styles.inputIcon} source={require('../assets/Visualización.png')}/>
        </TouchableOpacity>
        </View>
        {errorMessage ? (
                <Text style={styles.errorMessage}>{errorMessage}</Text>
            ) : null}
        <TouchableOpacity style={[styles.buttonContainer, styles.loginButton]}
         onPress={() => onSubmit({ vCellphone, vPassword })}>
        <Text style={styles.loginText}>INGRESAR</Text>
        </TouchableOpacity>
        </View>
  );
};

这是我得到的错误：


  undefined不是对象（evaluating_this.state.secureTextEntry）


任何帮助将非常感激。

最佳答案

现在，您的TextInput试图在渲染时访问this.state.secureTextEntry，并且会出错，因为

1）您没有this.state，因为您使用的是React Hook

2）您没有secureTextEntry的初始状态

您需要使用useState初始化状态下的secureTextEntry值，如下所示：

const [secureTextEntry, setSecureTextEntry] = useState(true);

并像这样在您的jsx中相应地访问它：

onPassPress = () => {
    setSecureTextEntry(!secureTextEntry);
}

<TextInput
    secureTextEntry={secureTextEntry}
    ...rest of props omitted for brevity
/>