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

背景:

为了快速输入账号,密码,写了一个插件,但由于输入部分用了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)

上一篇: 解决antd select选择器placeholder不生效
下一篇: 【js】正则过滤中文
gz-郭小敏
博客等级 码龄9年 39粉丝 112原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值