在所有的答案中，经过大量的谷歌搜索，我发现这是有效的

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

我们正在使用 window.HTMLInputElement.prototype，即 HTMLInputElement。一个界面，它提供特殊的属性和方法来操作输入元素的选项、布局和呈现。

然后我们将使用 Object.getOwnPropertyDescriptor() 方法来设置输入值。最后，我们将在输入上调度更改事件以使用 React onChange 进行模拟

这里是这个答案的详细解释：https : //hustle.bizongo.in/simulate-react-on-change-on-Controlled-components-baa336920e04

正如在模拟部分的 react test utils 文档中所展示的那样，您可以看到他们所做的基本上是更改 DOM 节点值，然后触发输入事件。

你可以做的是类似下面的事情，用你的输入 DOM 元素和新值调用它。

const changeValue = (element, value) => {
  const event = new Event('input', { bubbles: true })
  element.value = value
  element.dispatchEvent(event)
}

不过，这取决于您如何定义组件，例如，如果您期望输入按键，则必须分派匹配的事件。

这将取决于浏览器，但对于文本输入，onChange调用正在侦听input事件

element.value = 'new value';
var event = new Event('input', { bubbles: true });
element.dispatchEvent(event);

这是一个经过充分测试的解决方案，适用于 IE11 以及其他浏览器。我猜是 createNewEvent 将此解决方案与其他解决方案区分开来。该setReactValue方法还返回更改后的值。

function setReactValue(element, value) {
  let lastValue = element.value;
  element.value = value;
  let event = createNewEvent("input", element);
  event.simulated = true;
  let tracker = element._valueTracker;
  if (tracker) {
    tracker.setValue(lastValue);
    element.dispatchEvent(event);
  }
  return lastValue;
}

function createNewEvent(eventName, element) {
    let event;
    if (typeof(Event) === 'function') {
        event = new Event(eventName, {target: element, bubbles:true});
    } else {
        event = document.createEvent('Event');
        event.initEvent(eventName, true, true);
        element.addEventListener(eventName, function(e) {
          e.target = element;
        });
    }
    return event;
}

根据这个答案，您可以从 dom 获取 react 实例。

假设obj是一个 dom 元素。

function findReact(dom) {// from https://stackoverflow.com/a/39165137/4831179
    for (var key in dom) {
        if (key.startsWith("__reactInternalInstance$")) {
            var compInternals = dom[key]._currentElement;
            var compWrapper = compInternals._owner;
            var comp = compWrapper._instance;
            return comp;
        }
    }
    return null;
};

var instance = findReact(obj);

console.log(instance.state);//try to modify the form and check what's here

instance.setState({
//the state name from the previous step
});

instance.submit();//something like this