React Native自定义密码输入框字符重复问题求助

你的问题核心在于掩码状态下，TextInput的value被设置为星号字符串，输入新字符时，组件会把星号和新输入的字符拼接后传给onChangeText，导致真实密码被错误覆盖，进而触发重复渲染。比如真实密码是"a"，显示"*"，输入"b"时，onChangeText拿到的是"*b"，此时真实密码被改成"*b"，星号长度变成2，显示"**"，形成循环导致重复问题。

解决方案：分离真实密码与显示值 #

把真实密码和界面显示的掩码字符串分开管理，在掩码状态下只处理输入的有效字符（新输入的最后一位或删除操作），避免真实值被掩码污染。

修正后的完整代码：

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text } from 'react-native';

const MaskedPasswordInput = () => {
  const [isMasked, setIsMasked] = useState<boolean>(true);
  // 存储真实的密码内容，不直接暴露到界面
  const [realPassword, setRealPassword] = useState<string>('');
  // 存储界面显示的内容：星号或真实密码
  const [displayValue, setDisplayValue] = useState<string>('');

  const handleTextChange = (text: string) => {
    if (isMasked) {
      // 掩码状态下，判断操作类型：删除或新增
      if (text.length < realPassword.length) {
        // 长度变短，说明是删除操作，截取真实密码的前n-1位
        const updatedPassword = realPassword.slice(0, -1);
        setRealPassword(updatedPassword);
        setDisplayValue('*'.repeat(updatedPassword.length));
      } else if (text.length > realPassword.length) {
        // 长度变长，取输入文本的最后一位作为新字符追加
        const newChar = text.slice(-1);
        const updatedPassword = realPassword + newChar;
        setRealPassword(updatedPassword);
        setDisplayValue('*'.repeat(updatedPassword.length));
      }
    } else {
      // 非掩码状态，直接同步真实密码和显示值
      setRealPassword(text);
      setDisplayValue(text);
    }
  };

  const handleTogglePasswordVisibility = () => {
    setIsMasked(prev => !prev);
    // 切换显示状态时，更新界面显示内容
    setDisplayValue(isMasked ? realPassword : '*'.repeat(realPassword.length));
  };

  return (
    <View>
      <TextInput
        placeholder={'Password'}
        value={displayValue}
        onChangeText={handleTextChange}
        autoCorrect={false}
        autoCapitalize="none"
      />
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={handleTogglePasswordVisibility}>
        <Text>{isMasked ? 'Show Password' : 'Hide Password'}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default MaskedPasswordInput;

关键修改说明 #

1. 拆分状态：用realPassword存储真实密码，displayValue存储界面显示的内容，彻底避免掩码字符串污染真实值。
2. 掩码状态的输入处理：
   • 删除操作：通过文本长度变化判断，直接截取真实密码的前n-1位，同步更新显示的星号数量。
   • 新增操作：只取输入文本的最后一位（因为前面的都是星号，无效），追加到真实密码后更新星号长度。
3. 切换显示逻辑：点击Show/Hide时，直接切换displayValue为真实密码或对应长度的星号，保证界面显示正确。

额外优化 #

• 添加autoCorrect={false}和autoCapitalize="none"，符合密码输入的常规需求。
• 调整TouchableOpacity的activeOpacity为0.7，提升交互反馈体验。

内容的提问来源于stack exchange，提问作者Петър Манов