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

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

比如下面中的可售数量

想着自己写了个脚本方便自己填充数据。

试着尝试直接修改input标签的value值,点下其他空白处输入框内容就没有了。

通过插件看了下用到了react。

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

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

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

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

相关推荐
huangyiyi666661 天前
轮询那些事儿
javascript·前端框架·vue·js
Ya-Jun4 天前
快应用TypeError: The ‘compilation‘ argument must be an instance of Compilation错误
node.js·ux·js
歪歪1005 天前
在哪些场景下适合使用 v-model 机制?
服务器·前端·javascript·servlet·前端框架·js
闫辉5 天前
HackerNews 播客生成器
node.js·js
~无忧花开~8 天前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js
爱偷懒的。。9 天前
基于 WebSocket 协议的实时弹幕通信机制分析-抖音
网络·python·websocket·网络协议·学习·js
棋子一名11 天前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
EterNity_TiMe_13 天前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
ar·js·rokid
TeleostNaCl14 天前
实战 | 使用 Chrome 开发者工具修改网页源码跳过前端校验
前端·chrome·经验分享·后端·js
吹晚风吧19 天前
什么是跨域?跨域怎么解决?跨域解决的是什么问题?
java·vue.js·js·cors