React开发银行卡到期日期输入框：MM/YY格式输入功能实现求助

需求是实现一个银行卡到期日期输入框，以「MM/YY」格式展示，用户输入数字时依次替换模板中的M、M、Y、Y。以下是优化后的实现方案，解决原代码中无法完整替换MM和YY的问题：

优化后的代码 #

import React, { useState } from 'react';

function ExpireDate() {
  // 存储用户输入的纯数字，最多4位
  const [inputDigits, setInputDigits] = useState('');

  const handleInputChange = (e) => {
    // 过滤非数字字符，只保留数字
    const digits = e.target.value.replace(/\D/g, '');
    // 最多保留4位数字（MM两位 + YY两位）
    const trimmedDigits = digits.slice(0, 4);
    setInputDigits(trimmedDigits);
  };

  // 格式化显示内容为MM/YY模板
  const formatDisplayValue = () => {
    // 模板拆分：前两位是月份，后两位是年份
    const monthPart = inputDigits.slice(0, 2).padEnd(2, 'M');
    const yearPart = inputDigits.slice(2, 4).padEnd(2, 'Y');
    return `${monthPart}/${yearPart}`;
  };

  return (
    <div>
      <input
        className="expire-date"
        value={formatDisplayValue()}
        onChange={handleInputChange}
        maxLength={5} // MM/YY共5个字符（含斜杠）
        placeholder="MM/YY"
      />
    </div>
  );
}

export default ExpireDate;

关键改进点 #

• 状态存储更合理：直接存储用户输入的纯数字字符串，而非数组，便于截取和处理
• 输入处理更健壮：使用onChange事件替代onKeyDown，能覆盖粘贴、输入法输入等场景，同时过滤所有非数字字符，限制最多4位输入
• 格式化逻辑精准：将输入数字拆分到月份和年份部分，用padEnd自动填充剩余的M/Y，完美匹配MM/YY的模板替换需求
• 用户体验优化：设置maxLength限制显示长度，避免输入框内容超出格式范围

额外说明 #

如果需要增加月份合法性校验（比如月份不能大于12），可以在handleInputChange中加入校验逻辑：

const handleInputChange = (e) => {
  const digits = e.target.value.replace(/\D/g, '');
  let trimmedDigits = digits.slice(0, 4);
  
  // 校验月份部分
  if (trimmedDigits.length >= 2) {
    const month = parseInt(trimmedDigits.slice(0, 2), 10);
    if (month > 12) {
      // 月份无效时，只保留第一位数字
      trimmedDigits = trimmedDigits.slice(0, 1) + trimmedDigits.slice(2);
    }
  }
  
  setInputDigits(trimmedDigits);
};

内容的提问来源于stack exchange，提问作者Нікіта Гончарук