React Native中TextInput正则验证失效及onBlur报错问题求助

一、onEndEditing替换大写字母未生效的修复 #

核心原因及解决步骤 #

1. 使用受控组件模式
   必须将TextInput的value与状态绑定，否则替换后的内容无法同步到输入框。示例代码：

import { useState } from 'react';
import { TextInput } from 'react-native';

const [inputVal, setInputVal] = useState('');

const checkEnteredValues = () => {
  // 替换所有大写字母为小写（根据需求调整替换逻辑）
  const processedVal = inputVal.replace(/[A-Z]/g, match => match.toLowerCase());
  // 必须更新状态才能让输入框显示处理后的值
  setInputVal(processedVal);
};

// 对应TextInput组件
<TextInput
  value={inputVal}
  onChangeText={setInputVal}
  onEndEditing={checkEnteredValues}
  placeholder="请输入内容"
/>

2. 验证正则表达式逻辑
   确认正则符合需求：

• 移除大写字母：inputVal.replace(/[A-Z]/g, '')
• 转小写：inputVal.replace(/[A-Z]/g, c => c.toLowerCase())
  注意必须加g修饰符实现全局匹配，否则仅替换第一个大写字母。

二、onBlur触发“Tried to get frame for out of range index NaN”错误的修复 #

该错误多因TextInput所在列表（如FlatList）的渲染状态异常导致，以下是针对性解决方法：

• 避免在onBlur中触发全局列表重渲染
  如果输入框在列表项内，不要在onBlur回调中更新父组件的全局状态（会触发列表重新渲染），可将输入框状态放在列表项组件内部，或用防抖延迟更新。
• 给列表项和TextInput设置唯一key
  确保列表项有唯一key属性，TextInput也可单独设置key，避免React渲染时混淆组件实例：

<FlatList
  data={listData}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <View key={item.id}>
      <TextInput
        key={`input-${item.id}`}
        value={item.val}
        onChangeText={(text) => updateItemVal(item.id, text)}
        onBlur={() => processItemInput(item.id)}
      />
    </View>
  )}
/>

• 检查条件渲染逻辑
  确保onBlur触发时，TextInput未被条件渲染移除（比如失去焦点时触发了输入框的卸载逻辑），保证回调执行时组件仍存在于虚拟DOM中。
• 改用onSubmitEditing替代onBlur（场景允许时）
  如果是表单输入完成后的验证，使用onSubmitEditing（点击键盘提交按钮触发）比onBlur更稳定，不会因组件意外卸载触发错误。

内容的提问来源于stack exchange，提问作者Raphaël Chemouni