Chrome控制台JS填充MUI表单失效：仅显示可点击消失文本的原因

原因分析 #

这是受控组件导致的问题：你用的是Material UI的输入框，这类组件基于React实现，属于「受控组件」——输入框的值由组件内部的state（状态）驱动，而非直接由DOM的value属性控制。你直接通过DOM API修改value属性，只是临时改变了DOM表面的显示，但组件的state还是初始的空值。当组件重新渲染（比如点击输入框触发状态更新）时，会用state里的空值覆盖DOM的value，所以文本会立刻消失，表单也不会真正获取到填充的内容。

解决办法 #

要让组件真正识别输入内容，需要模拟用户真实的输入行为，触发组件监听的事件，让React同步更新内部state。可以用以下代码替代直接赋值：

const input = document.querySelector('input[name="captchaText"]');
input.value = 'abcde';
// 触发input事件，通知组件更新state
input.dispatchEvent(new Event('input', { bubbles: true }));
// 部分场景下可能需要补充change事件，确保状态同步完整
input.dispatchEvent(new Event('change', { bubbles: true }));

补充说明 #

• React的受控组件会忽略直接对DOM value的修改，只认自身state中的值。只有触发组件监听的标准输入事件（如input、change），才能让组件更新state，从而真正绑定输入值。
• 针对更复杂的Material UI组件，有时可能还需要触发blur事件，但大部分场景下input事件就足够完成状态同步。

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