自定义日历开发：解决跨月份选中同一日期的问题

你的问题核心在于直接操作DOM添加选中类，且未通过状态关联选中日期的年/月信息，导致切换月份后，同日期的元素会被错误选中，同时React的渲染机制会让手动DOM操作的状态不可靠。以下是具体修复步骤：

1. 用状态管理选中的完整日期 #

在组件中添加状态，存储选中日期的年、月、日信息，替代直接操作DOM：

import { useState } from 'react';

// 在组件内部初始化状态
const [selectedDate, setSelectedDate] = useState(null);
// 格式示例：{ year: 2024, month: 5, day: 2 }（month为0索引，对应6月）

2. 修改点击事件逻辑，更新状态 #

不再直接操作DOM类名，而是通过点击事件更新选中状态，同时仅响应日期元素的点击：

const handleClick = (e) => {
  // 过滤非日期元素的点击（比如头部按钮、空占位span）
  const isDateSpan = e.target.parentElement.classList.contains('dates') && !e.target.classList.contains('empty');
  if (!isDateSpan) return;

  const day = parseInt(e.target.textContent);
  const targetDate = {
    year: currentYear,
    month: currentMonth,
    day: day
  };

  // 点击已选中的日期则取消选中，否则设置为新选中日期
  setSelectedDate(prev => {
    if (prev?.year === targetDate.year && prev?.month === targetDate.month && prev?.day === targetDate.day) {
      return null;
    }
    return targetDate;
  });
};

3. 渲染日期时根据状态添加选中类 #

在生成日期span时，通过状态判断当前日期是否为选中日期，动态添加selected类：

<span 
  className={`
    ${isToday(d + 1) ? "active" : ""}
    ${selectedDate?.year === currentYear && selectedDate?.month === currentMonth && selectedDate?.day === d + 1 ? "selected" : ""}
  `}
  key={i}
>
  {d + 1}
</span>

为什么之前的方案失效？ #

1. DOM操作不可靠：React的渲染基于状态，手动修改DOM类名会在组件重新渲染（比如切换月份）时被覆盖，导致状态不一致。
2. 未关联年月信息：之前仅判断日期数值，没有绑定对应的年和月，导致所有月份的同数值日期都会被误判为选中状态。
3. DOM文本解析脆弱：通过e.currentTarget.children[0].children[1].textContent获取月份的方式极易出错，比如文本格式调整后就会失效，直接使用组件内部的currentMonth和currentYear状态才是可靠方案。

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