React中如何从Select下拉框选中项获取对应对象ID（JS/TS）

JavaScript 解决方案 #

问题核心在于你没有利用下拉选项的value（即月份对象的key）去Months对象中匹配对应的ID。以下是两种修复方式：

方式1：保留原有双状态结构 #

直接在handleChange中通过选中的key从Months里取出完整的月份对象，同步更新month和monthId：

export default function App() {
  const [month, setMonth] = useState(Months.January.name);
  const [monthId, setMonthId] = useState(Months.January.id);

  const handleChange = (e) => {
    const selectedKey = e.target.value;
    const selectedMonth = Months[selectedKey];
    setMonth(selectedMonth.name);
    setMonthId(selectedMonth.id);
  };

  return (
    <>
      <p>{month}</p>
      <p>{monthId}</p>
      <select
        className={styles.selectMonth}
        defaultValue={Months.January.name}
        onChange={handleChange}
      >
        {Object.keys(Months).map((key) => (
          <option key={key} value={key}>
            {Months[key].name}
          </option>
        ))}
      </select>
    </>
  );
}

方式2：简化为单状态（推荐） #

直接存储选中的完整月份对象，避免维护两个独立状态，代码更简洁：

export default function App() {
  const [selectedMonth, setSelectedMonth] = useState(Months.January);

  const handleChange = (e) => {
    const selectedKey = e.target.value;
    setSelectedMonth(Months[selectedKey]);
  };

  return (
    <>
      <p>{selectedMonth.name}</p>
      <p>{selectedMonth.id}</p>
      <select
        className={styles.selectMonth}
        defaultValue={Months.January.name}
        onChange={handleChange}
      >
        {Object.keys(Months).map((key) => (
          <option key={key} value={key}>
            {Months[key].name}
          </option>
        ))}
      </select>
    </>
  );
}

TypeScript 类型安全方案 #

借助Enum和类型定义实现更严谨的类型约束，避免拼写错误：

// 定义月份数据类型
type Month = {
  id: number;
  name: string;
};

// 定义月份枚举，约束合法的月份key
enum MonthKey {
  January = 'January',
  February = 'February',
  March = 'March',
  April = 'April',
  May = 'May',
  June = 'June',
  July = 'July',
  August = 'August',
  September = 'September',
  October = 'October',
  November = 'November',
  December = 'December',
}

// 用Record约束Months对象的key必须是MonthKey成员
const Months: Record<MonthKey, Month> = {
  [MonthKey.January]: { id: 1, name: 'January' },
  [MonthKey.February]: { id: 2, name: 'February' },
  [MonthKey.March]: { id: 3, name: 'March' },
  [MonthKey.April]: { id: 4, name: 'April' },
  [MonthKey.May]: { id: 5, name: 'May' },
  [MonthKey.June]: { id: 6, name: 'June' },
  [MonthKey.July]: { id: 7, name: 'July' },
  [MonthKey.August]: { id: 8, name: 'August' },
  [MonthKey.September]: { id: 9, name: 'September' },
  [MonthKey.October]: { id: 10, name: 'October' },
  [MonthKey.November]: { id: 11, name: 'November' },
  [MonthKey.December]: { id: 12, name: 'December' },
};

export default function App() {
  const [selectedMonth, setSelectedMonth] = useState<Month>(Months[MonthKey.January]);

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedKey = e.target.value as MonthKey;
    setSelectedMonth(Months[selectedKey]);
  };

  return (
    <>
      <p>{selectedMonth.name}</p>
      <p>{selectedMonth.id}</p>
      <select
        className={styles.selectMonth}
        defaultValue={MonthKey.January}
        onChange={handleChange}
      >
        {Object.values(MonthKey).map((key) => (
          <option key={key} value={key}>
            {Months[key].name}
          </option>
        ))}
      </select>
    </>
  );
}

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