React/原生JavaScript中限制年月下拉选择范围的问题：需修复月份仅显示至当前月的逻辑

嗨，看起来你的年份下拉逻辑已经正常工作了，问题出在月份下拉没有根据选中的年份做动态限制对吧？我来帮你梳理下修复思路和具体的代码调整方案：

核心需求拆解 #

你想要的效果是：

• 如果选中的是当前年份，月份下拉只显示1月到当前月（比如现在是2023年3月，就只显示Jan-Mar）
• 如果选中的是过去的年份（非当前年），则显示全部12个月份

代码调整步骤 #

1. 先定义基础变量，获取当前的年和月

首先在组件里先拿到当前的时间信息，方便后续判断：

// 获取当前年份（4位数）
const currentYear = new Date().getFullYear();
// 获取当前月份的索引（JS里月份是0开始的：0=Jan，1=Feb...11=Dec）
const currentMonthIndex = new Date().getMonth();

2. 重构月份选项的生成逻辑，改成动态计算

不要直接固定生成所有12个月份，而是根据选中的年份来过滤：

// 保留你原有的月份名称数组
const monthNames = [
  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];

// 写一个函数，根据选中的年份返回可选的月份列表
const getAvailableMonths = (selectedYear) => {
  // 判断：如果选的是当前年，最多显示到当前月；否则显示全部12个月
  const maxAllowedMonthIndex = selectedYear === currentYear ? currentMonthIndex : 11;
  
  // 截取对应的月份，再转成Dropdown需要的label/value格式
  return monthNames.slice(0, maxAllowedMonthIndex + 1).map((month, index) => ({
    label: month,
    value: index < 9 ? `0${index + 1}` : `${index + 1}` // 补0处理保持格式统一
  }));
};

3. 在组件中动态生成月份选项

结合你的表单状态values.year，实时计算可选月份：

// 如果还没选年份，默认用当前年作为判断依据
const availableMonths = getAvailableMonths(values.year || currentYear);

4. 更新月份Dropdown的配置

把原来固定的months换成动态的availableMonths：

<Dropdown
  required
  id='month'
  options={availableMonths}
  label='Month'
  name='month'
  value={values.month}
  onChange={handleChange}
/>

额外优化：简化年份生成逻辑 #

你原来的年份生成逻辑可以稍微简化下，让可读性更高：

const years = range(currentYear - 7, currentYear + 1).map(year => ({
  label: year,
  value: year
}));

为什么原来的逻辑不行？ #

因为你之前是直接把所有12个月份转成选项，没有做任何年份判断和过滤，所以不管选哪年都会显示全部月份。现在改成动态计算后，当用户切换年份时，React会因为values.year状态变化重新渲染，自动更新月份选项。

备注：内容来源于stack exchange，提问作者user20216157