如何在浏览器控制台触发Discogs页面中React绑定的change事件？

直接修改selectedIndex后给祖先元素触发事件没用，核心原因是React采用合成事件系统，实际的事件处理逻辑绑定在目标元素（select#show）的合成事件链中，并非直接监听div#app上的原生事件。试试下面两种可行方案：

方法一：触发select元素的标准change事件（推荐） #

先修改选中值，再给select元素本身触发带冒泡属性的change事件，完全模拟用户真实操作流程：

const selectEl = document.getElementById('show');
selectEl.selectedIndex = 0;
// 创建符合React合成事件要求的change事件（开启冒泡、可取消）
selectEl.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));

方法二：直接调用React的事件处理函数（适配特定React版本） #

如果方法一无效，可以直接定位select元素对应的React内部事件处理函数并调用：

const selectEl = document.getElementById('show');
// 获取React元素的内部属性（不同React版本属性名可能有差异，比如__reactEventHandlers$xxx）
const reactProps = selectEl.__reactEventHandlers$ || selectEl._reactRootContainer?._internalRoot?.current?.pendingProps;
if (reactProps?.onChange) {
  // 构造包含必要属性的模拟事件对象
  const mockEvent = {
    target: selectEl,
    preventDefault: () => {},
    stopPropagation: () => {}
  };
  reactProps.onChange(mockEvent);
}

注意：方法二依赖React内部实现细节，Discogs的React版本更新后可能失效，优先使用方法一。

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