外部js代码注入修改react框架的input和Textarea的值-2025年6月

需求，在些网站需要批量或者自动化填充内容，但网站是别人的，网站用到react，又没法直接修改value值

比如下面中的可售数量，试着尝试直接修改input标签的value值，点下其他空白处输入框内容就没有了.

• 通过插件看了下用到的库。
  在控制台看了下react的版本,我这里版本是16.14.0版本，其他版本的没测试
  
  

修改input标签值核心代码

封装好函数了，传入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();
}
 
//调用例子
setReactInputValue(input标签实例对象,"新值内容");

修改textarea标签值核心代码

该标签和上述input标签修改方式不同，需要获取fiber节点和Props，访问React内部状态更新函数，详情看下面函数

 
/**
 * 在React Fiber架构中可靠修改textarea值
 * @param {HTMLTextAreaElement} textarea - 目标textarea元素
 * @param {string} newValue - 要设置的新值
 */
function setReactTextareaValue(textarea, newValue) {
    // 1. 获取React Fiber节点和Props
    const keys = Object.keys(textarea);
    const fiberKey = keys.find(key => key.startsWith('__reactFiber$'));
    const propsKey = keys.find(key => key.startsWith('__reactProps$'));
    // 2. 使用React Fiber的更新机制
    if (fiberKey && propsKey) {
        const fiberNode = textarea[fiberKey];
        const reactProps = textarea[propsKey];
        // 获取状态更新函数
        const updater = fiberNode.return?.memoizedProps?.onChange ||
            fiberNode.return?.pendingProps?.onChange ||
            reactProps?.onChange;
        if (updater) {
            // 使用原生setter设置值
            const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
                HTMLTextAreaElement.prototype,
                'value'
            ).set;
            nativeInputValueSetter.call(textarea, newValue);
            // 创建完整事件对象
            const event = new Event('input', {
                bubbles: true,
                cancelable: true,
                composed: true
            });
            // 设置事件的目标
            Object.defineProperties(event, {
                target: { value: textarea, enumerable: true },
                currentTarget: { value: textarea, enumerable: true }
            });
            // 触发React的状态更新
            updater(event);
            return;
        }
    }
    throw new Error('获取React Fiber节点失败');
}
 
 
//调用例子
setReactTextareaValue(textarea标签实例对象,"新值内容");
 
//

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

原创作者: byhgz 转载于: https://www.cnblogs.com/byhgz/p/18935251