React表单中Chrome扩展自动填充select元素失效求助

使用Chrome扩展自动填充React构建的表单时，input和textarea元素能成功更新，但select元素修改值后会恢复原状。相关代码如下：

reactSetValue(document.getElementById("Dropdown 1"), 1, "select"); //DOES NOT WORK
reactSetValue(document.getElementById("Textarea 1"), "testing testing 123", "textarea") //Works fine
reactSetValue(document.getElementById("Input 1"), "Title text", "input"); //Also works fine

function reactSetValue(i,v,t = "select"){
    var nativeInputValueSetter = null;
    if(t=="input") nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
    if(t=="select") nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, "value").set;
    if(t=="textarea") nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
    nativeInputValueSetter.call(i, v);

    var ev2 = new Event('input', { bubbles: true});
    i.dispatchEvent(ev2);
}

想知道是不是需要触发input以外的事件来完成select元素的选择？

问题出在select元素触发的事件不对，React对select元素的状态更新监听的是change事件，而非input事件。另外，设置select值时最好先确认对应的option确实存在，避免无效值导致React回滚状态。

修改后的reactSetValue函数如下：

reactSetValue(document.getElementById("Dropdown 1"), 1, "select"); // 现在可正常工作
reactSetValue(document.getElementById("Textarea 1"), "testing testing 123", "textarea") //Works fine
reactSetValue(document.getElementById("Input 1"), "Title text", "input"); //Also works fine

function reactSetValue(i,v,t = "select"){
    var nativeInputValueSetter = null;
    if(t=="input") nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
    if(t=="select") nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, "value").set;
    if(t=="textarea") nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
    
    // 先确认select的目标选项存在（可选但推荐）
    if(t === "select") {
        const optionExists = Array.from(i.options).some(opt => opt.value == v);
        if(!optionExists) return;
    }
    
    nativeInputValueSetter.call(i, v);

    // 根据元素类型触发对应事件
    const eventName = t === "select" ? "change" : "input";
    const ev = new Event(eventName, { bubbles: true, cancelable: true });
    i.dispatchEvent(ev);
}

• React中，input/textarea通常监听input事件更新状态，而select元素则是监听change事件，这是核心差异。
• 触发事件时添加cancelable: true更贴近原生事件行为，降低React忽略事件的概率。
• 提前检查选项是否存在，能避免因设置无效值导致React状态未更新，最终恢复原状的问题。

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