React JS实现需求：信用卡过期日期已过时变更卡片样式

我来帮你搞定这个过期信用卡样式变更的需求，结合你现有的类组件代码，给你一套具体的实现方案：

1. 先写一个日期判断的辅助方法 #

首先我们需要能准确判断一张信用卡是否已经过期，在你的ExistingCardList类里添加一个实例方法来处理这个逻辑：

isCardExpired = (expMonth, expYear) => {
  const now = new Date();
  const currentYear = now.getFullYear();
  const currentMonth = now.getMonth() + 1; // JS月份是0起始，要转成实际的1-12月

  // 处理信用卡常见的两位数年份（比如YY格式转成20YY）
  const cardFullYear = expYear.toString().length === 2 
    ? 2000 + parseInt(expYear, 10) 
    : parseInt(expYear, 10);

  // 核心判断逻辑：年份小于当前年直接过期；年份相同但月份小于当前月也过期
  if (cardFullYear < currentYear) {
    return true;
  }
  if (cardFullYear === currentYear && expMonth < currentMonth) {
    return true;
  }
  return false;
};

2. 修复你现有代码的小问题 #

注意到你写的onMouseOut方法有个小bug，应该把mouseOverIndex设为null，不然鼠标移出后状态还会保留之前的索引：

onMouseOut () {
  this.setState({ mouseOverIndex: null })
}

3. 在渲染列表时应用条件样式 #

假设你在render方法里遍历this.state.data渲染卡片，那在渲染每个卡片元素时，调用上面的判断方法，给过期卡片添加特殊的CSS类：

render() {
  return (
    <div className="card-list-container">
      {this.state.data.map((card, index) => {
        // 判断当前卡片是否过期
        const hasExpired = this.isCardExpired(card.expMonth, card.expYear);
        // 组合样式类：基础样式 + 过期样式（如果需要）
        const cardClassName = `credit-card-item ${hasExpired ? 'expired-card' : ''}`;

        return (
          <div
            key={index}
            className={cardClassName}
            onMouseOver={() => this.onMouseOver(index)}
            onMouseOut={() => this.onMouseOut(index)}
            onClick={() => this.onClickHandler(index)}
          >
            {/* 这里是你的卡片内容，比如卡号、持卡人、过期日期等 */}
            <div className="card-number">**** **** **** {card.lastFourDigits}</div>
            <div className="card-holder">{card.cardHolderName}</div>
            <div className="card-expiry">Exp: {card.expMonth}/{card.expYear}</div>
          </div>
        );
      })}
    </div>
  );
}

4. 添加对应的CSS样式 #

最后在你的样式文件里定义过期卡片的视觉样式，比如变灰、加红色边框来提醒用户：

.credit-card-item {
  /* 正常卡片的基础样式 */
  padding: 1.2rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

.expired-card {
  /* 过期卡片的特殊样式 */
  background-color: #f5f5f5;
  border-color: #ef5350;
  opacity: 0.7;
}

.expired-card:hover {
  border-color: #e53935;
}

额外优化建议 #

• 如果你的接口返回的是完整的Date对象而非单独的月/年，那判断逻辑可以简化为card.expiryDate < new Date()
• 可以把日期判断方法抽成单独的工具函数文件，方便其他组件复用
• 如果需要实时监听日期变化（比如跨零点的场景），可以在组件挂载时设置一个定时器，每天零点重新判断一次卡片状态

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