React Native：TextInput清空状态后返回仍显示密码的问题求助

问题原因 #

你遇到的问题核心是TextInput未与状态双向绑定：仅通过onChangeText更新clave状态，但输入框的显示内容并未关联clave值。因此即便执行setClave('')清空状态，输入框仍保留历史输入内容，返回登录页时状态为空但输入框有值，导致验证失败。

解决方案 #

1. 绑定value属性实现双向同步

修改密码输入框组件，添加value={clave}，让输入框内容与状态完全同步：

<TextInput 
  secureTextEntry={true}
  autoCompleteType="password"
  onChangeText={val => setClave(val)}
  value={clave} // 新增：关联状态与输入框显示内容
/>

添加后，执行setClave('')时输入框会自动清空，返回登录页时状态与输入框内容保持一致。

2. 优化自动填充配置（可选）

若存在系统密码管理器自动填充干扰，可补充以下属性：

<TextInput 
  secureTextEntry={true}
  autoCompleteType="password"
  onChangeText={val => setClave(val)}
  value={clave}
  autoCapitalize="none" // 禁止自动大写
  autoCorrect={false} // 禁止自动纠错
  textContentType="password" // 明确内容类型，避免自动填充冲突
/>

3. 页面聚焦时重置状态（可选）

若通过导航返回登录页，可监听页面聚焦事件，每次回到登录页时自动清空状态：

import { useFocusEffect } from '@react-navigation/native';

// 在登录页组件内部添加
useFocusEffect(
  React.useCallback(() => {
    setClave('');
  }, [])
);

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