React中如何检测select元素变化？onchange无响应排查

你的问题核心是React事件属性的命名规范：React使用驼峰式的合成事件，而非原生HTML的小写事件属性。

你当前代码里用的是小写的onchange，React会把它当作普通的HTML属性，不会将其绑定为事件处理函数，所以选择颜色时控制台没有输出。

正确的实现方式 #

只需要把onchange改成React规范的驼峰式onChange，就能正常触发事件：

<select id="color-selector"
        name="colors"
        onChange={() => console.log("Color has changed")}>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
    <option value="orange">Orange</option>
    <option value="purple">Purple</option>
</select>

为什么原生onchange不行？ #

React的事件系统是基于合成事件（SyntheticEvent）实现的，它统一了不同浏览器的事件行为，并且要求事件属性使用驼峰命名（比如onClick、onChange）。如果使用原生HTML的小写事件属性（如onchange），React不会识别为事件绑定，只会将其作为普通的DOM属性存在，自然不会触发对应的函数。

额外说明 #

如果你非要用原生JS的方式绑定事件（不推荐，不符合React组件化思维），可以通过ref获取DOM元素后手动添加事件监听：

import { useRef, useEffect } from 'react';

function ColorSelector() {
  const selectRef = useRef(null);

  useEffect(() => {
    const handleChange = () => console.log("Color has changed");
    selectRef.current.addEventListener('change', handleChange);
    
    return () => {
      selectRef.current.removeEventListener('change', handleChange);
    };
  }, []);

  return (
    <select ref={selectRef} id="color-selector" name="colors">
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="yellow">Yellow</option>
      <option value="orange">Orange</option>
      <option value="purple">Purple</option>
    </select>
  );
}

但这种方式需要手动管理事件的绑定和移除，不如直接使用React的onChange合成事件简洁可靠。

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