React Native中实现MM/YY格式信用卡到期日输入框并关联分存变量

实现逻辑 #

用react-native-masked-text的custom掩码生成MM/YY格式输入，在输入变化时拆分结果存入cardMM和cardYY两个状态；输入框的value则通过两个状态拼接成符合掩码要求的格式。

完整代码实现 #

import React, { useState } from 'react';
import { TextInputMask } from 'react-native-masked-text';

const CardExpiryInput = () => {
  // 初始化月份、年份状态，存储字符串类型
  const [cardMM, setCardMM] = useState<string>('');
  const [cardYY, setCardYY] = useState<string>('');

  // 处理输入变化，拆分掩码后的文本
  const handleExpiryChange = (maskedText: string) => {
    const [month, year] = maskedText.split('/');
    // 空值兜底，避免状态更新时出现undefined
    setCardMM(month ?? '');
    setCardYY(year ?? '');
  };

  // 拼接状态为掩码格式的显示值
  const getDisplayValue = () => {
    // 补零+限制两位，确保输入单个数字时格式正确（如输入"3"变为"03"）
    const formattedMM = cardMM.padStart(2, '0').slice(0, 2);
    const formattedYY = cardYY.padStart(2, '0').slice(0, 2);
    
    // 根据输入进度返回对应格式，避免空值时显示无效的//
    if (!cardMM) return '';
    if (!cardYY) return `${formattedMM}/`;
    return `${formattedMM}/${formattedYY}`;
  };

  return (
    <TextInputMask
      type="custom"
      value={getDisplayValue()}
      options={{ mask: 'MM/YY' }}
      keyboardType="numeric"
      style={{ color: 'white', top: 35 }}
      onChangeText={handleExpiryChange}
    />
  );
};

export default CardExpiryInput;

关键细节说明 #

• value属性设置：通过getDisplayValue函数将两个状态拼接成符合MM/YY格式的字符串，同时做了补零和空值处理，保证输入框始终显示合法格式。
• onChangeText处理：接收掩码后的完整文本，用split('/')拆分为月份和年份部分，分别更新对应状态，用??处理空值防止报错。
• 输入格式限制：slice(0,2)确保最多输入两位，符合月份(01-12)和两位年份的要求，padStart(2, '0')自动补零保证格式统一。

内容的提问来源于stack exchange，提问作者ALAIN TORRES