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

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

比如下面中的可售数量
image

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

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

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

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

/**
* 修改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

原创作者: byhgz 转载于: https://www.cnblogs.com/byhgz/p/18935251
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值