React中编程设置select值后如何触发onChange事件？

首选方案：遵循React数据流，使用受控组件 #

这是最推荐的实现方式，完全不需要操作原生DOM，符合React的设计理念，不会出现状态不同步的问题：

• 将select的value绑定到React的状态（类组件用state、函数组件用useState）
• 将onChange的业务逻辑单独抽离为公共函数，支持手动调用
• 需要编程式修改值时，直接更新状态并主动调用抽离的处理函数即可

代码示例：

import { useState } from 'react';

function DemoSelect() {
  const [selectValue, setSelectValue] = useState('');

  // 抽离公共的变更处理逻辑
  const handleChange = (e) => {
    const currentValue = e.target.value;
    setSelectValue(currentValue);
    // 此处写你的业务逻辑，比如联动其他字段、发起请求等
    console.log('触发onChange，当前值：', currentValue);
  }

  // 编程式赋值的方法
  const updateSelectValue = (newValue) => {
    // 构造模拟事件对象传入处理函数即可触发完整逻辑
    handleChange({ target: { value: newValue } });
  }

  return (
    <select value={selectValue} onChange={handleChange}>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  )
}

兜底方案：原生DOM操作后手动触发事件（不推荐） #

如果遇到必须操作原生DOM的场景（比如对接非React编写的第三方工具），可以用以下方法触发React识别的change事件：

const selectDom = document.querySelector('你的select选择器');
const targetValue = '你要设置的值';

// 兼容React管控的DOM元素，避免赋值被React状态覆盖
const nativeValueSetter = Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, 'value').set;
nativeValueSetter.call(selectDom, targetValue);

// 触发冒泡的change事件，React的合成事件系统可以监听到该事件
selectDom.dispatchEvent(new Event('change', { bubbles: true }));

注意：该方案脱离了React的数据流管控，容易出现页面展示和React内部状态不一致的问题，仅作为迫不得已的兜底方案使用。

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