如何在Chrome调试控制台设置React扩展的输入框值？

直接修改DOM输入框的value属性后，React组件的状态没同步，是因为这类输入框属于受控组件——值完全由React状态管理，DOM只是状态的渲染结果。你得手动触发React监听的事件，才能让状态和DOM值同步。

具体操作步骤：

• 先获取输入框元素并设置DOM的value
• 创建并触发对应的事件（React通常监听change或input事件）

代码示例（优先用change事件）： #

const inputbox = document.querySelector('.state-styles');
inputbox.value = "blablablabla";
// 创建符合React合成事件要求的change事件
const changeEvent = new InputEvent('change', {
  bubbles: true,
  cancelable: true
});
inputbox.dispatchEvent(changeEvent);

如果change事件无效，试试input事件： #

有些React组件会监听input事件来实时同步状态，替换上面的事件即可：

const inputEvent = new InputEvent('input', {
  bubbles: true,
  cancelable: true
});
inputbox.dispatchEvent(inputEvent);

特殊情况处理 #

如果是自定义封装的输入组件（比如第三方UI库的组件），可能需要触发更具体的事件，比如blur（失去焦点）来触发状态更新。可以多试几种常见事件组合，比如先触发input再触发blur：

inputbox.dispatchEvent(new InputEvent('input', { bubbles: true }));
inputbox.dispatchEvent(new Event('blur', { bubbles: true }));

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