React Native中TextInput格式化后退格键失效的解决方法咨询

问题背景 #

我使用以下函数处理数字输入的格式化：

export const parseToNumber = (value: string) => {
  const numberRegex = /^[0-9\b]+$/;

  if (numberRegex.test(value)) {
    return value;
  } else {
    return value.replace(/\D/g, "");
  }
};

再结合下面的逻辑实现每4个字符间添加空格的效果：

onChangeText={(e) => {
  setFieldValue(
    "phone",
    parseToNumber(e).replace(/(.{4})/g, "$1  ")
  );
}}

但目前遇到的问题是退格键（Backspace）无法正常工作，我想知道两种解决方向：一是如何在用户按下退格键时跳过格式化函数，直接执行setFieldValue("phone", e)；二是能否通过修改parseToNumber函数来修复退格失效的问题？

解决方案一：监听退格键，单独处理 #

如果使用的是React Native的TextInput，可以通过onKeyPress事件判断退格操作，跳过格式化逻辑：

// 维护当前输入的原始值状态
const [rawPhoneValue, setRawPhoneValue] = useState('');

// 监听按键，标记是否为退格操作
const handleKeyPress = (e) => {
  if (e.nativeEvent.key === 'Backspace') {
    // 退格时直接截取原始值的前n-1位，跳过格式化
    setFieldValue("phone", rawPhoneValue.slice(0, -1));
  }
};

// 正常输入时执行格式化
const handleTextChange = (e) => {
  const formattedValue = parseToNumber(e).replace(/(.{4})/g, "$1  ");
  setFieldValue("phone", formattedValue);
  setRawPhoneValue(e); // 更新原始值状态，用于退格时的截取
};

// 在TextInput中绑定事件
<TextInput
  onChangeText={handleTextChange}
  onKeyPress={handleKeyPress}
  value={rawPhoneValue}
/>

解决方案二：修改parseToNumber函数，兼容退格场景 #

原函数中的\b是正则的单词边界，并非退格符（退格符对应\x08），这是导致退格失效的核心原因。我们可以调整函数逻辑，增加退格判断：

export const parseToNumber = (value: string, isBackspace?: boolean) => {
  // 退格操作时，直接截取前n-1位，同时清理末尾可能残留的空格
  if (isBackspace) {
    return value.slice(0, -1).replace(/\s*$/, '');
  }

  // 正常输入时：先过滤非数字字符，再按4位间隔加空格
  const pureNumbers = value.replace(/\D/g, "");
  return pureNumbers.replace(/(.{4})/g, "$1  ").trim();
};

然后配合onKeyPress传递退格状态：

let isBackspaceFlag = false;

const handleKeyPress = (e) => {
  isBackspaceFlag = e.nativeEvent.key === 'Backspace';
};

const handleTextChange = (e) => {
  const formattedValue = parseToNumber(e, isBackspaceFlag);
  setFieldValue("phone", formattedValue);
  isBackspaceFlag = false; // 重置标记
};

补充说明 #

• 方案一逻辑更直观，针对退格做单独分支处理，适合快速修复；
• 方案二将格式化逻辑整合到一个函数中，代码更集中，便于后续维护；
• 两种方案都需要注意空格的边界处理，避免出现删除空格时无法正确删除数字的情况。

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