当前位置: 首页 > news >正文

使用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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • YOLOv8实例分割+双目相机实现物体尺寸测量
  • LSI-9361阵列卡笔记
  • 手机谷歌浏览器怎么用
  • C/C++ 多线程[1]---线程创建+线程释放+实例
  • redis的RDB快照详解
  • C学习(数据结构)-->二叉树
  • SpringBoot依赖之Spring Data Redis 实现地理坐标(Geospatial)
  • 响应式Web设计:纯HTML和CSS的实现技巧-1
  • Java 入门指南:注解(Annotation)
  • Linux系统下的容器安全:深入解析与最佳实践
  • 《AI办公类工具PPT系列之三——Gamma APP》
  • appium下载及安装
  • .NET开源纪元:穿越封闭的迷雾,拥抱开放的星辰
  • vue3-基础
  • 从零开始学cv-5: 图像的仿射变换
  • 【Linux系统编程】快速查找errno错误码信息
  • Apache Spark Streaming 使用实例
  • Centos6.8 使用rpm安装mysql5.7
  • gulp 教程
  • linux安装openssl、swoole等扩展的具体步骤
  • node入门
  • 湖南卫视:中国白领因网络偷菜成当代最寂寞的人?
  • 记一次和乔布斯合作最难忘的经历
  • 可能是历史上最全的CC0版权可以免费商用的图片网站
  • 扑朔迷离的属性和特性【彻底弄清】
  • 使用 5W1H 写出高可读的 Git Commit Message
  • 移动端解决方案学习记录
  • C# - 为值类型重定义相等性
  • const的用法,特别是用在函数前面与后面的区别
  • ​【经验分享】微机原理、指令判断、判断指令是否正确判断指令是否正确​
  • ​configparser --- 配置文件解析器​
  • ​经​纬​恒​润​二​面​​三​七​互​娱​一​面​​元​象​二​面​
  • !!Dom4j 学习笔记
  • #《AI中文版》V3 第 1 章 概述
  • #07【面试问题整理】嵌入式软件工程师
  • #DBA杂记1
  • #WEB前端(HTML属性)
  • (007)XHTML文档之标题——h1~h6
  • (c语言)strcpy函数用法
  • (delphi11最新学习资料) Object Pascal 学习笔记---第13章第6节 (嵌套的Finally代码块)
  • (附源码)springboot码头作业管理系统 毕业设计 341654
  • (佳作)两轮平衡小车(原理图、PCB、程序源码、BOM等)
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(七)
  • (转载)从 Java 代码到 Java 堆
  • (最优化理论与方法)第二章最优化所需基础知识-第三节:重要凸集举例
  • ***检测工具之RKHunter AIDE
  • .Net OpenCVSharp生成灰度图和二值图
  • .NET 除了用 Task 之外,如何自己写一个可以 await 的对象?
  • .NET/C# 在代码中测量代码执行耗时的建议(比较系统性能计数器和系统时间)...
  • .net6使用Sejil可视化日志
  • .net专家(高海东的专栏)
  • [ 2222 ]http://e.eqxiu.com/s/wJMf15Ku
  • [20150904]exp slow.txt
  • [ARM]ldr 和 adr 伪指令的区别
  • [C/C++]数据结构 深入挖掘环形链表问题