如何通过JS模拟输入让React输入框同步更新Virtual DOM？

核心解决方案：触发React可识别的输入事件 #

React的受控表单组件依赖自身状态管理输入值，直接修改真实DOM的value不会同步到Virtual DOM的state。必须触发React监听的标准输入事件，并确保事件包含足够细节让React感知到值变更。

以下是经过验证的可行代码：

const inputElement = document.getElementById('serialNoScanner');
const targetValue = '123456';

// 1. 修改真实DOM的输入值
inputElement.value = targetValue;

// 2. 创建并触发符合标准的InputEvent（React优先监听此事件）
const inputEvent = new InputEvent('input', {
  bubbles: true,
  cancelable: true,
  data: targetValue // 提供输入数据，帮助React识别变更
});

// 3. 额外触发change事件（部分组件可能监听change而非input）
const changeEvent = new Event('change', { bubbles: true });

inputElement.dispatchEvent(inputEvent);
inputElement.dispatchEvent(changeEvent);

// 可选：模拟焦点切换，确保组件完成状态同步
inputElement.focus();
inputElement.blur();

为什么之前的尝试无效？ #

• 你之前使用的new Event('input')是通用事件对象，缺少React识别值变更所需的data等关键属性，React无法将其关联到输入值的变化。
• 单纯的focus()/blur()只会触发焦点状态变更，不会触发表单值的更新逻辑，因此无法同步Virtual DOM。

关于isTrusted属性的说明 #

isTrusted是事件的只读属性，标记事件是否由用户原生操作触发。React部分版本可能优先信任isTrusted为true的事件，但通过InputEvent触发的事件虽然isTrusted为false，依然可以被React的合成事件机制识别。

备选方案（不推荐，依赖React内部API） #

如果上述事件触发方式无效，可以尝试直接修改React组件的内部状态，但这依赖React的私有API，可能随版本更新失效：

const input = document.getElementById('serialNoScanner');
// 注意：不同React版本的内部属性名不同，以下示例适用于部分18.x版本
const fiber = input._reactRootContainer?._internalRoot?.current?.child;
if (fiber?.memoizedState?.stateNode) {
  // 直接调用组件的setState更新值
  fiber.memoizedState.stateNode.setState({ value: targetValue });
}

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