React TypeScript中<select>元素选中值无法捕获问题求助

核心问题是<option>的onSelect事件在React中无法触发，React里需通过父级<select>的onChange事件捕获选中值。

具体修改步骤 #

1. 给外层<select>绑定onChange事件，同时为每个<option>设置value属性：

<select onChange={(e) => onOptionSelect(e.target.value)}>
  {category.map((rec: dataCategoryType, index: number) => (
    <option
      key={rec.value + "-" + index}
      value={rec.label}
    >
      {rec.label}
    </option>
  ))}
</select>

2. 保留原onOptionSelect逻辑即可，注意useState是异步更新，若要获取最新的lang值，建议用useEffect监听：

const [lang, setLang] = useState<string>("");

const onOptionSelect = (option: string) => {
    setLang(option);
}

// 监听lang状态变化，打印最新值
useEffect(() => {
  console.log("当前选中语言：", lang);
}, [lang]);

补充说明 #

• 不要给<option>绑定onSelect，该事件在React表单元素中不生效，所有选择逻辑需放在<select>的onChange中。
• <option>的value属性是核心，它决定了e.target.value获取到的内容，这里对应你需要存储的rec.label。

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