React Native模拟器中TextInput值不更新问题咨询与修复

这个问题的核心原因很明确：当你输入完最后一个字符直接点击登录按钮时，当前聚焦的输入框并没有触发onBlur事件。而你的Input组件里，只有在inputState.touched为true（也就是触发过onBlur）时，才会通过useEffect把最新的值同步给父组件的formReducer。所以最后输入的那个字段，因为没触发onBlur，它的最新值就没更新到LoginScreen的formState里。

修复方案 #

这里提供两种最直接的修复方式，你可以根据自己的需求选择：

方案1：登录时先收起键盘（推荐）

在点击登录时，主动调用React Native的Keyboard.dismiss()方法，强制所有输入框失去焦点，触发onBlur事件，这样就能确保所有输入框的最新值都同步到父组件了。

步骤如下：

1. 在LoginScreen.js中导入Keyboard：

import { Keyboard, Button } from 'react-native';

2. 修改loginHandler函数，先收起键盘再处理登录逻辑：

const loginHandler = () => {
  // 先收起键盘，触发所有输入框的onBlur
  Keyboard.dismiss();
  // 这里再执行你的登录逻辑，比如调用API、校验formState等
  console.log('登录信息:', formState.inputValues);
};

方案2：调整Input组件的同步逻辑

如果你不想依赖键盘收起的操作，可以修改Input组件，让每次输入变化时都同步值给父组件，而不是只在onBlur之后。只需要修改Input.js里的useEffect逻辑：

useEffect(() => {
  // 去掉touched的判断，每次值或有效性变化就同步
  props.onInputChange(id, inputState.value, inputState.isValid);
}, [inputState.value, inputState.isValid, onInputChange, id]);

不过这种方式会让父组件的formReducer在每次输入字符时都触发，可能会增加不必要的渲染，但优点是完全避免了onBlur的依赖问题。

真实iOS设备上的情况 #

这个问题一定会在真实iOS设备上出现。iOS的UI交互逻辑中，当你点击屏幕上的自定义按钮（非键盘自带的回车/完成键）时，当前聚焦的输入框不会自动失去焦点，也就不会触发onBlur事件。Android设备上部分场景可能会自动失焦，但为了跨平台一致性，推荐使用方案1来统一处理。

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