在 React 日历组件中实现单月日期选择的正确方法

import React, { useState } from 'react';

function Calendar() {
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
  // 使用Set来存储选中的日期，方便添加和删除，并确保唯一性
  const [selectedDates, setSelectedDates] = useState(new Set()); 

  // ... 其他日历逻辑
}

const handleClick = (day) => { // 直接传入点击的day，更清晰
  // 构建完整的日期字符串 (YYYY-MM-DD) 作为唯一标识
  const fullDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

  // 使用函数式更新确保获取到最新的状态
  setSelectedDates(prevSelectedDates => {
    const newSelectedDates = new Set(prevSelectedDates); // 创建Set的副本以保持不可变性
    if (newSelectedDates.has(fullDate)) {
      newSelectedDates.delete(fullDate); // 如果已选中，则取消选中
    } else {
      newSelectedDates.add(fullDate); // 如果未选中，则添加选中
    }
    return newSelectedDates;
  });
};

// 在渲染日期的部分
<div className="dates">
  {/* ... 空白占位符 */}

  { 
    Array.from({ length: currentLastDay }, (_, d) => {
      const day = d + 1;
      // 构建当前日期字符串用于检查是否选中
      const fullDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      const isDaySelected = selectedDates.has(fullDate);

      return (
        <span 
          className={`${isToday(day) ? "active" : ""} ${isDaySelected ? "selected" : ""}`} 
          key={fullDate} // 使用完整的日期字符串作为key，确保唯一性
          onClick={() => handleClick(day)} // 直接绑定到span，并传入day
        >
          {day}
        </span>
      );
    }) 
  }
</div>

import React, { useState } from 'react';

const MONTHS = [
  "January", "February", "March", "April", "May", "June", 
  "July", "August", "September", "October", "November", "December"
];

// 假设这些函数和变量在组件外部或通过props传入
const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
const isToday = (day, month, year) => {
  const today = new Date();
  return day === today.getDate() && month === today.getMonth() && year === today.getFullYear();
};

function Calendar() {
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
  // 使用Set存储选中的完整日期字符串，如 "2023-06-02"
  const [selectedDates, setSelectedDates] = useState(new Set()); 

  const handlePrevClicked = () => {
    setCurrentMonth(prevMonth => {
      if (prevMonth === 0) {
        setCurrentYear(prevYear => prevYear - 1);
        return 11;
      }
      return prevMonth - 1;
    });
  };

  const handleNextClicked = () => {
    setCurrentMonth(prevMonth => {
      if (prevMonth === 11) {
        setCurrentYear(prevYear => prevYear + 1);
        return 0;
      }
      return prevMonth + 1;
    });
  };

  const handleClick = (day) => {
    const fullDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

    setSelectedDates(prevSelectedDates => {
      const newSelectedDates = new Set(prevSelectedDates);
      if (newSelectedDates.has(fullDate)) {
        newSelectedDates.delete(fullDate);
      } else {
        newSelectedDates.add(fullDate);
      }
      return newSelectedDates;
    });
  };

  const currentLastDay = getDaysInMonth(currentYear, currentMonth);
  const currentStartingDay = getFirstDayOfMonth(currentYear, currentMonth);

  return (
    <div className="datePicker">
      <div className="pickerHeader">
        <button onClick={handlePrevClicked}>Prev</button>
        <h1>
          {MONTHS[currentMonth]}
          <small>  |   {currentYear}</small>
        </h1>
        <button onClick={handleNextClicked}>Next</button>
      </div>

      <div className="weekHeader">
        <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
      </div>

      <div className="dates">
        {Array.from({ length: currentStartingDay }, (_, i) => (
          <span className="empty" key={`empty-${i}`} />
        ))}

        {Array.from({ length: currentLastDay }, (_, d) => {
          const day = d + 1;
          const fullDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
          const isDaySelected = selectedDates.has(fullDate);

          return (
            <span
              className={`${isToday(day, currentMonth, currentYear) ? "active" : ""} ${isDaySelected ? "selected" : ""}`}
              key={fullDate}
              onClick={() => handleClick(day)}
            >
              {day}
            </span>
          );
        })}
      </div>
    </div>
  );
}

export default Calendar;