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

本文主要是介绍使用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

这篇关于使用js代码模拟React页面中input文本框输入的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---