React Native中如何实现信用卡年月TextInput的MM/YY格式输入？

原代码的问题 #

• 分隔符错误使用空格而非需求的斜杠/
• 正则/(\d{2})/g会对每两位数字添加分隔符，导致输入超过4位时出现多余分隔符（如123456会变成12/34/56）
• 未过滤非数字输入，用户可能输入无效字符
• 初始state设为null，可能导致输入框显示异常

修正后的代码 #

import { useState } from 'react';
import { TextInput } from 'react-native'; // 基于React Native环境示例

const [monthYear, setMonthYear] = useState('') // 初始值改为空字符串

function _handlingMonthYear(text) {
  // 1. 过滤所有非数字字符
  const cleanedText = text.replace(/\D/g, '');
  // 2. 限制最多输入4位数字（匹配MM/YY的长度要求）
  const limitedText = cleanedText.slice(0, 4);
  // 3. 格式化：输入长度≥2时，在第2位后添加斜杠
  const formattedText = limitedText.length > 2 
    ? `${limitedText.slice(0, 2)}/${limitedText.slice(2)}` 
    : limitedText;
  
  setMonthYear(formattedText);
}

<TextInput
  onChangeText={(text) => _handlingMonthYear(text)}
  placeholder='MM/YY'
  value={monthYear}
  keyboardType='numeric' // 仅显示数字键盘，优化输入体验
/>

代码说明 #

• 过滤非数字：确保输入框只保留有效数字，避免用户输入字母、符号等无效内容
• 长度限制：限制最多4位数字，符合月份（2位）+年份后两位（2位）的格式要求
• 格式化逻辑：仅在输入长度超过2位时添加斜杠，避免出现1/2这类错误格式，同时保证输入1234时自动转为12/34

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