React中如何通过<select>的onChange事件实现修改操作？——下拉菜单onChange函数失效问题分析与解决

嘿，我来帮你梳理下这个问题～

你当前的代码里犯了一个很常见的小错误：把onChange事件绑定到了每个<option>标签上，但不管是在React还是原生HTML的规则里，下拉选择的变更事件都应该绑定在<select>元素本身上，单个<option>是不会触发onChange事件的。

问题成因 #

当用户切换下拉选项时，浏览器会触发整个<select>元素的change事件，而不是单个选项的。你把事件绑错了位置，自然就无法触发你定义的func函数啦。

修正方案 #

只需要把onChange={this.func}从<option>移到<select>标签上就行，修正后的代码如下：

<select name="color" onChange={this.func}>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>

如果需要获取用户选中的具体颜色值，还可以给func加上事件参数，这样能拿到选中的value：

func = (e) => {
  console.log("Selected color:", e.target.value);
};

这样修改后，切换选项时就能正常触发函数并打印内容啦～

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