使用js代码模拟React页面中input文本框输入

遇到的问题:
使用js代码模拟input框中输入指定的字符串,在浏览器调试页面能看到输入框的文字已经变成我需要的文字,但是只要我点击输入框,或者页面上的其他输入框,输入框的文字就清空了。
解决过程和方法:

  • 最开始以为是什么代码清空了我的输入,没有找到相关代码。

  • 然后发现,如果我手动输入一行文字,然后再用代码输入一段文字,当点击输入框的时候,文字会变成我手动输入的文字。

  • 使用chrome浏览器开发工具(其他浏览器也可能有这个功能),监控相应的input的值,当value值变化的时候中断。在开发者模式下,选择需要设置断点的元素,右键菜单:Break on-> attribute modifications
    在这里插入图片描述

  • 发现中断的地方和Ract框架的代码相关,google一下,找到了相关的问题和解决方法。

  • 最后我的代码如下:

//inputid是需要赋值的input的id
let event = new Event('input', { bubbles: true });
let input = document.querySelector('#inputid');
let lastValue = input.value;
input.value = '输入指定值';
let tracker = input._valueTracker;
if (tracker) {
	tracker.setValue(lastValue);
}
input.dispatchEvent(event);

具体原因大家可以google查找下,我的问题解决了,就没继续深究了。

参考链接:https://juejin.cn/post/6844904128305430541

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值