React Native TextInput设置secureTextEntry后输入值重置问题求助

我之前也碰到过这个烦人的问题！当用secureTextEntry属性做密码输入框时，切到其他输入框再回来，想在原有密码后面加字符，结果直接清空之前的内容只留新输入的，确实挺头疼的。下面是几个亲测有效的解决办法：

• 确保用受控组件正确维护输入状态
  很多时候这个问题都是因为没把输入值和组件state绑定好，导致React Native没法正确追踪输入内容。比如错误写法可能没给TextInput绑定value属性，或者更新state的逻辑有问题。

  正确的受控写法应该是这样的：

  import { useState } from 'react';
  import { TextInput } from 'react-native';
  
  function PasswordInput() {
    const [password, setPassword] = useState('');
  
    return (
      <TextInput
        secureTextEntry
        value={password}
        onChangeText={setPassword}
        // 加上这两个属性，避免自动修正/大写带来的额外问题
        autoCapitalize="none"
        autoCorrect={false}
      />
    );
  }
  

  核心就是必须把value绑定到state变量，让组件完全受控，这样切换焦点时，输入框就能正确保留原有内容。

• iOS端添加persistentPlaceholderTextColor属性
  有时候iOS上的TextInput在secureTextEntry模式下，焦点切换会有渲染异常，添加这个属性可以缓解这类问题：

  <TextInput
    secureTextEntry
    value={password}
    onChangeText={setPassword}
    persistentPlaceholderTextColor="#999"
  />
  

• 避免在focus/blur时切换secureTextEntry状态
  如果你有显示/隐藏密码的需求，别在焦点变化事件里直接切换secureTextEntry的值，应该用独立的state来控制，而且切换时不要修改密码的state：

  function PasswordInput() {
    const [password, setPassword] = useState('');
    const [showPassword, setShowPassword] = useState(false);
  
    return (
      <>
        <TextInput
          secureTextEntry={!showPassword}
          value={password}
          onChangeText={setPassword}
        />
        <Button
          title={showPassword ? '隐藏密码' : '显示密码'}
          onPress={() => setShowPassword(!showPassword)}
        />
      </>
    );
  }
  

  这样切换显示/隐藏状态时，输入框的内容不会被意外重置。

• 优化组件避免不必要的重渲染
  如果密码输入框所在的组件频繁重渲染，也可能导致secureTextEntry模式下的内容丢失。可以用React.memo来包裹组件，减少不必要的重渲染：

  const PasswordInput = React.memo(() => {
    const [password, setPassword] = useState('');
  
    return (
      <TextInput
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
    );
  });
  

你可以先试试第一种受控组件的写法，这是解决这个问题最基础也最有效的思路。

内容的提问来源于stack exchange，提问作者GeekDev