js代码修改react框架的input的值-2025年6月

需求，在1688商家工作台中的发布助手页面中，设置了模版依旧会有些输入框内容要自己填写，太麻烦了。
比如下面中的可售数量

想着自己写了个脚本方便自己填充数据。
试着尝试直接修改input标签的value值，点下其他空白处输入框内容就没有了。
通过插件看了下用到了react。

在控制台看了下react的版本,我这里版本是16.14.0版本，其他版本的没测试

封装好函数了，传入input元素对象和新的内容即可

1. /**
2. * 修改react的input框的值，vue的没有测试
3. * @param inputEl 输入框元素
4. * @param newText 新的文本
5. */
6. function setReactInputValue(inputEl, newText) {
7.     //1. 聚焦元素（模拟用户点击）
8.     inputEl.focus();
9.     //2. 使用setter方式修改值
10.     Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(inputEl, newText);
11.     //3. 创建并触发input事件（让React检测到变化）
12.     const inputEvent = new Event('input', {bubbles: true, cancelable: true});
13.     inputEl.dispatchEvent(inputEvent);
14.     //4. 创建并触发change事件（确保所有监听器触发）
15.     const changeEvent = new Event('change', {bubbles: true});
16.     inputEl.dispatchEvent(changeEvent);
17.     //5. 移除焦点（模拟用户完成操作）
18.     inputEl.blur();
19. }

复制代码

如若转载请注明出处，别当csdn的dog

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！