object.getOwnPropertyDescriptor 或 _valueTracker 不起作用。如何用多个输入来模拟反应表单中的用户输入？

Question

我正在创建一个 Chrome 扩展来自动填写反应表单。页面中有一个多行表格。每行都有选择和输入，可以用按钮删除。

我使用了以下两种方法，但都不起作用。当我在设置值后单击另一个输入或其他按钮时，注入的输入值在用户单击一两次后立即消失（再次丢失） - 太令人沮丧了！

方法#1：

function setReactInputValue(element, value) {
    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
    nativeInputValueSetter.call(element, "xxx");
    element.dispatchEvent(new Event('input', { bubbles: true }));
}

方法#2：

lastValue = input1.value;
let tracker = input1.\_valueTracker;
if(tracker) 
{ 
    tracker.setValue("xxx");
}

我猜当我点击一两次时，React 就会渲染表单。当我手动输入值时，表格工作正常。

当我点击表单中的某些元素（按钮或输入）时，为什么我用 javascript 注入的输入值会丢失？

有人可以展示更改表单输入值的最后方法吗？

Answer 1

尝试以下操作：

const event = new Event('input', { bubbles: true });
const input = document.getElementById('input');
input.value = 'new_value';
document.dispatchEvent(event);