【react】解决在外部设置react组件input的value问题

原创已于 2023-04-20 09:53:15 修改 · 934 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

于 2023-04-13 14:10:30 首次发布

文章讨论了一种在React应用中，由于使用antd库的输入组件导致直接修改value属性无法通过校验的情况。作者提出了通过模拟用户键盘输入来规避这个问题的方法，涉及到React16中的事件处理和_valueTracker的重置。提供的解决方案是创建并触发input事件以更新输入框的状态。

背景：

为了快速输入账号，密码，写了一个插件，但由于输入部分用了antd，改变value并不能通过校验。

解决思路：

能否模拟用户键盘输入，这样避免直接设置value校验不通过的问题。

找到的办法：

react页面专属，因为react16内部定义了descript拦截value,所以派发事件，无法触发input所绑定的事件，需要重置输入状态；

function set(dom,num,value){
	let inputLabel = dom; //这里获取需要自动录入的input内容
	let lastValue = inputLabel[num].value;
	inputLabel[num].value = value;
	let event = new Event("input", { bubbles: true });
	//  React15
	event.simulated = true;
	//  React16 内部定义了descriptor拦截value，此处重置状态
	let tracker = inputLabel[num]._valueTracker;
	if (tracker) {
		tracker.setValue(lastValue);
	}
	inputLabel[num].dispatchEvent(event);
}

setTimeout(()=>{
	set($(".ant-input"),0,'账号');
	set($(".ant-input"),1,'密码');
},200)