如何在Chrome扩展或控制台用JavaScript修改React输入框值并生效？

直接修改DOM元素的value属性无法同步React组件的内部状态，这就是你提交后仍获取旧值的原因——React的受控表单依赖事件触发来更新状态，而非直接监听DOM属性变化。

解决方法：模拟真实输入事件 #

通过触发React监听的输入事件（如input或change），让组件感知到值的变化并更新内部状态，步骤如下：

1. 获取目标输入元素
2. 设置DOM的value属性
3. 触发input事件（React受控组件通常绑定onInput或onChange监听）
4. 执行提交操作

示例代码：

// 获取输入框和提交按钮
const input = document.querySelector('.input');
const submitBtn = document.querySelector('.form-submit-button');

// 修改DOM值
input.value = '5';

// 触发input事件，同步React状态
input.dispatchEvent(new Event('input', { bubbles: true }));

// 点击提交
submitBtn.click();

关键说明 #

• bubbles: true确保事件能像真实用户输入一样向上冒泡，被React的事件监听器捕获
• 若组件仅监听change事件，可将'input'替换为'change'

为什么原代码无效？ #

你直接赋值input.value=5仅修改了DOM节点的属性，但没有触发React绑定的事件处理函数。React受控组件的状态（state）和DOM值是单向绑定的：只有通过事件触发，React才会更新state，进而同步到DOM（而非反过来）。

不推荐的方法（依赖内部实现） #

若能通过React DevTools定位到组件实例，可直接修改其内部状态，但这种方法依赖React的私有API（如__reactFiber），版本更新后可能失效，仅用于临时调试：

// 仅作示例，不推荐生产/长期使用
const input = document.querySelector('.input');
const fiber = input._reactRootContainer?._internalRoot?.current?.child?.child;
fiber.memoizedState = { ...fiber.memoizedState, value: '5' };
// 强制组件重新渲染
fiber.stateNode.forceUpdate();

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