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

寒鸽子2025-06-18 20:14

需求，在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