js代码修改react框架的input的值-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;
const reactProps = textarea;
// 获取状态更新函数
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
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]