React Native中MM/YY格式TextInput退格无法清除斜线问题求助

问题根源 #

你的格式化逻辑在处理输入清空或退格操作时，没有正确移除自动添加的'/'分隔符，导致状态中残留该符号。

修复方案 #

修改输入处理函数，确保无有效数字输入时直接清空状态，同时优化格式化逻辑适配删除场景：

const handleExpiryChange = (text) => {
  // 过滤所有非数字字符
  const numericOnly = text.replace(/\D/g, '');
  let formattedValue = '';

  if (numericOnly.length > 0) {
    // 仅当有数字时才生成带分隔符的格式
    formattedValue = numericOnly.length >= 2 
      ? `${numericOnly.slice(0, 2)}/${numericOnly.slice(2, 4)}` 
      : numericOnly;
  }
  // 无数字时直接设为空，彻底清除'/'
  setExpiryDate(formattedValue);
};

额外优化 #

1. 确保TextInput的value严格绑定到expiryDate状态，避免输入框显示与状态不一致：

<TextInput
  value={expiryDate}
  onChangeText={handleExpiryChange}
  keyboardType="numeric"
  maxLength={5}
  placeholder="MM/YY"
/>

2. 若需支持一键清除，可添加clearButtonMode="while-editing"（iOS）或自定义清除按钮，点击时直接调用setExpiryDate('')。

这个修改会在用户删除所有数字或清空输入时，自动移除残留的'/'，确保输入框状态与用户操作一致。

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