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

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

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

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

修改input标签值核心代码

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

1. /**
2. * 修改react的input框的值，vue的没有测试
3. * @param inputEl 输入框元素
4. * @param newText 新的文本
5. */
6. function setReactInputValue(inputEl, newText) {
7.     //1. 聚焦元素（模拟用户点击）
8.     inputEl.focus();
9.     //2. 使用setter方式修改值
10.     Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(inputEl, newText);
11.     //3. 创建并触发input事件（让React检测到变化）
12.     const inputEvent = new Event('input', {bubbles: true, cancelable: true});
13.     inputEl.dispatchEvent(inputEvent);
14.     //4. 创建并触发change事件（确保所有监听器触发）
15.     const changeEvent = new Event('change', {bubbles: true});
16.     inputEl.dispatchEvent(changeEvent);
17.     //5. 移除焦点（模拟用户完成操作）
18.     inputEl.blur();
19. }
21. //调用例子
22. setReactInputValue(input标签实例对象,"新值内容");

复制代码

修改textarea标签值核心代码

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

1. /**
2. * 在React Fiber架构中可靠修改textarea值
3. * @param {HTMLTextAreaElement} textarea - 目标textarea元素
4. * @param {string} newValue - 要设置的新值
5. */
6. function setReactTextareaValue(textarea, newValue) {
7.     // 1. 获取React Fiber节点和Props
8.     const keys = Object.keys(textarea);
9.     const fiberKey = keys.find(key => key.startsWith('__reactFiber$'));
10.     const propsKey = keys.find(key => key.startsWith('__reactProps$'));
11.     // 2. 使用React Fiber的更新机制
12.     if (fiberKey && propsKey) {
13.         const fiberNode = textarea[fiberKey];
14.         const reactProps = textarea[propsKey];
15.         // 获取状态更新函数
16.         const updater = fiberNode.return?.memoizedProps?.onChange ||
17.             fiberNode.return?.pendingProps?.onChange ||
18.             reactProps?.onChange;
19.         if (updater) {
20.             // 使用原生setter设置值
21.             const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
22.                 HTMLTextAreaElement.prototype,
23.                 'value'
24.             ).set;
25.             nativeInputValueSetter.call(textarea, newValue);
26.             // 创建完整事件对象
27.             const event = new Event('input', {
28.                 bubbles: true,
29.                 cancelable: true,
30.                 composed: true
31.             });
32.             // 设置事件的目标
33.             Object.defineProperties(event, {
34.                 target: { value: textarea, enumerable: true },
35.                 currentTarget: { value: textarea, enumerable: true }
36.             });
37.             // 触发React的状态更新
38.             updater(event);
39.             return;
40.         }
41.     }
42.     throw new Error('获取React Fiber节点失败');
43. }
46. //调用例子
47. setReactTextareaValue(textarea标签实例对象,"新值内容");
49. //

复制代码

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！