Tampermonkey修改ReactSelect下拉框值失效问题求助

需要修改cboe.com上SPX报价表页面的所有“Filters By”下拉框，选中“All”选项。尝试了以下JS代码：

var test = document.getElementsByClassName("ReactSelect__single-value css-1dimb5e-singleValue");
test[2].innerHTML = "All";
// test[2].value = 0;
test[2].click();

但点击“View Chain”后修改无效果，记录数未变化。页面使用ReactSelect组件，对应HTML结构如下：

<div class="Select-cui__sc-1dwep2c-0 esxuzG css-b62m3t-container">
    <span id="react-select-4-live-region" class="css-7pg0cj-a11yText"></span>
    <span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-7pg0cj-a11yText"></span>
    <div class="ReactSelect__control css-13cymwt-control">
        <div class="ReactSelect__value-container ReactSelect__value-container--has-value css-hlgwow">
            <div class="ReactSelect__single-value css-1dimb5e-singleValue">All</div>
            <div class="ReactSelect__input-container css-19bb58m" data-value="">
                <input class="ReactSelect__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="select_5" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-required="false" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;">
            </div>
        </div>
        <div class="ReactSelect__indicators css-1wy0on6">
            <span class="ReactSelect__indicator-separator css-1u9des2-indicatorSeparator"></span>
            <div class="ReactSelect__indicator ReactSelect__dropdown-indicator css-1xc3v61-indicatorContainer" aria-hidden="true">
                <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg">
                    <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
                </svg>
            </div>
        </div>
    </div>
</div>

直接修改DOM元素的innerHTML或value无效，因为ReactSelect是受控组件，选中状态由React内部状态维护，DOM仅为渲染结果。要生效需触发React的状态更新，以下两种方法可行：

方法1：模拟完整用户交互 #

最贴近真实操作，兼容性最好：

// 获取所有"Filters By"对应的下拉框容器
const filterSelects = document.querySelectorAll('.Select-cui__sc-1dwep2c-0.esxuzG.css-b62m3t-container');

filterSelects.forEach(selectContainer => {
    // 点击下拉箭头展开选项列表
    const dropdownIndicator = selectContainer.querySelector('.ReactSelect__dropdown-indicator');
    dropdownIndicator.click();

    // 等待选项列表渲染完成
    setTimeout(() => {
        // 在当前下拉框的选项范围内找到"All"选项并点击
        const allOption = selectContainer.closest('.filter-row').querySelector('.ReactSelect__option[aria-label="All"]');
        if (allOption) {
            allOption.click();
        }
    }, 300);
});

方法2：直接更新React组件状态（进阶） #

若模拟交互不稳定，可尝试获取组件实例修改内部状态：

// 获取目标ReactSelect的control元素
const selectControls = document.querySelectorAll('.ReactSelect__control');

selectControls.forEach(control => {
    // 找到React组件实例（属性名随React版本可能变化）
    const reactFiberKey = Object.keys(control).find(key => key.startsWith('__reactFiber$'));
    const componentInstance = control[reactFiberKey].return.stateNode;

    // 调用组件内置方法选中"All"，需匹配实际的value和label值
    componentInstance.selectOption({ value: 0, label: 'All' });
});

注：此方法依赖React内部实现，页面更新后可能失效，需根据实际调试调整value参数。

执行代码后，检查所有下拉框选中状态，再点击“View Chain”即可看到记录数更新为全部条目。

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