React下拉选择器取值总为最后一项，如何正确获取选中值并存入状态？

核心错误点 #

• getValues 遍历所有option重复赋值：循环执行了13次（从默认提示项到十二月）setMonthOfBirth，最终状态必然被最后一个元素十二月的文本覆盖
• 选择器监听事件错误：选择器取值应该绑定onChange事件，而非onClick事件，避免点击选择器还未选值就触发逻辑

修正代码 #

第一步：替换getValues函数逻辑 #

const getValues = (e) => {
  // 直接获取选中项的文本内容
  const selectedMonth = e.target.options[e.target.selectedIndex].textContent
  setMonthOfBirth(selectedMonth)
  console.log(selectedMonth)
}

第二步：修改月份选择器的事件绑定 #

把原来的onClick={getValues}改成onChange={getValues}：

<select onChange={getValues} className="selector_____months">
  {/* 原有option内容保持不变 */}
</select>

扩展建议（可选） #

如果需要获取日期和年份，只需要对应添加dayOfBirth、yearOfBirth的state，参考月份的实现逻辑给日、年的选择器也绑定对应的onChange事件即可。

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