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

相关推荐
上单带刀不带妹2 天前
Web Worker:解锁浏览器多线程,提升前端性能与体验
前端·js·web worke
qq_三哥啊3 天前
【HTML】<script>元素中的 defer 和 async 属性详解
html·js
我命由我1234511 天前
VSCode - VSCode 快速跳转标签页
开发语言·前端·ide·vscode·编辑器·html·js
结衣结衣.12 天前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
草履虫建模13 天前
前后端分离项目中的接口设计与调用流程——以高仙机器人集成为例
java·前端·spring boot·机器人·intellij-idea·ruoyi·js
年纪轻轻就扛不住18 天前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js
伍哥的传说19 天前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
兴趣使然_19 天前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
我命由我1234520 天前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
我命由我1234521 天前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js