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

news2024/11/28 0:44:18

遇到的问题:
使用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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2062685.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

火语言RPA流程组件介绍--睡眠等待

🚩【组件功能】:休眠等待指定时间后再恢复执行 阻塞当前流程继续向下运行,暂停等待指定时间,一般当上一组件操作需要缓冲时间或完成太快需要休眠观测时使用此组件。 配置预览 配置说明 延迟时间 支持T或# 输入仅支持整型 阻塞…

[Linux#44][线程] CP模型2.0 | 信号量接口 | 基于环形队列

目录 1.回忆 Task.hpp 1. #pragma once 2. 头文件和命名空间 3. 类 CallTask 4. 操作符字符串 5. 回调函数 mymath 阻塞队列 BlockQueue 的实现 BlockQueue 生产者和消费者线程 生产者productor 消费者 consumer 主函数 main 代码整体说明 2. 信号量 2.1 回忆&…

简化登录流程,助力应用建立用户体系

随着智能手机和移动应用的普及,用户需要在不同的应用中注册和登录账号,传统的账号注册和登录流程需要用户输入用户名和密码,这不仅繁琐而且容易造成用户流失。 华为账号服务(Account Kit)提供简单、快速、安全的登录功…

Raft分区产生的脏读问题

Raft分区产生的脏读问题 前言网络分区情况1 4和5分到一个分区,即当前leader依然在多数分区情况2 1和2分到一个分区,即当前leader在少数分区 脏读问题的解决官方解答其他论文 参考链接 前言 昨天面试阿里云被问到了这个问题,在此记录一下。 …

终于有人将Transformer可视化了!

都 2024 年,还有人不了解 Transformer 工作原理吗?快来试一试这个交互式工具吧。 2017 年,谷歌在论文《Attention is all you need》中提出了 Transformer,成为了深度学习领域的重大突破。该论文的引用数已经将近 13 万&#xff…

第二证券:股票可以亏损本金吗?股票会不会亏成负?

炒股是存在赔本本金的或许的,当你卖出股票的价格小于买入股票的价格,那就是赔本的。 实践上,还因为不管是买入股票仍是卖出股票都会收取股票生意手续费,所以假设卖出股票价格等于买入股价,或许只上涨了一点点&#xf…

开放式耳机怎么选?南卡、漫步者、Oladance OWS PRO四款耳机无广深度测评!

最近这段时间,我发现很多的小伙伴在我已经怎么选择开放式耳机,哪一款比较推荐的,如今市面上出现了很多不同的开放式耳机品牌,在购买的时候大多数人都没有非常明确的目标,主要就是因为大多数人对开放式耳机的了解程度不…

C#实现数据采集系统-多设备采集

系统功能升级-多设备采集 数据采集系统在网络环境下,性能足够,可以实现1对多采集,需要支持多个设备进行同时采集功能,现在就开发多设备采集功能 修改多设备配置 设备配置 将DeviceLink 改成List集合的DeviceLinks删掉Points&a…

【知识图谱】2.知识抽取与知识存储

目录 一、知识抽取 1、实体命名识别(Name Entity Recognition) 2、关系抽取(Relation Extraction) 3、实体统一(Entity Resolution) 4、指代消解(Coreference Resolution&#xff0…

聚水潭ERP集成金蝶云星瀚(聚水潭主供应链)

源系统成集云目标系统 金蝶云星瀚介绍 金蝶云星瀚是专为大企业设计的新一代数字化管理云服务、大型企业SaaS管理云,旨在凭借千亿级高性能和世界一流企业的实践,帮助大企业实现可信的数字化系统升迁,打造韧性企业,支撑商…

【xilinx】Vivado : 解决 I/O 时钟布局器错误:Versal 示例

示例详细信息&#xff1a; 设备&#xff1a; XCVM1802 Versal Prime问题&#xff1a;尽管使用 CCIO 引脚作为时钟端口&#xff0c;但该工具仍返回 I/O 时钟布局器错误 错误&#xff1a; <span style"background-color:#f3f3f3"><span style"color:#…

Windows+ONNX+TensorRT+YOLOV8+C++环境搭建

需求 跑通了Python环境下的Yolov8&#xff0c;但是考虑到性能&#xff0c;想试试C环境下的优化效果。 环境 Windows11 TensorRT8.6.1.6 CUDA 12.0 cudnn 8.9.7 opencv4.5.5 VS2019 参考目录 本次搭建主要参考以下博客和视频。第一个博客以下简称“博客1”&#xff0c…

Python画笔案例-004 绘制等腰三角形

1、绘制等腰三角形 通过 python 的turtle 库绘制一个等腰三角形的图案&#xff0c;如下图&#xff1a; 2、实现代码 这节课引入了新的指令&#xff0c;speed()-移动速度&#xff0c;home()-回到初始位置&#xff0c;回家的意思。hideturtle()&#xff0c;这个是隐藏海龟图形,并…

deepin 23丨如意玲珑正式集成至deepin 23,生态适配超千款

查看原文 近日&#xff0c;deepin 23正式发布&#xff0c;如意玲珑&#xff08;Linyaps&#xff09;&#xff08;以下简称玲珑&#xff09;作为deepin 23的重要特性之一&#xff0c;已经正式集成至deepin系统仓库&#xff0c;所有deepin 23的用户都可以无门槛地使用玲珑应用。…

Nginx: 配置项之events段核心参数用法梳理

events 核心参数 看一下配置文件 events 段中常用的一些核心参数 经常使用的参数并不多&#xff0c;比较常配置的就这6个 1 ) use 含义是 nginx使用何种事件驱动模型 这个事件驱动模型和linux操作系统底层的IO事件处理模型有关系语法&#xff1a;use methodmethod可选值&am…

云服务器常见问题及解决方案

1. 性能问题 问题描述&#xff1a;云服务器性能可能会受到多种因素影响&#xff0c;如虚拟化开销、资源竞争等&#xff0c;导致应用程序运行缓慢。 解决方案&#xff1a; 选择合适的实例类型&#xff1a;根据应用需求选择适当的实例类型&#xff0c;如计算优化型、内存优化型…

API篇(Java - 随机器(Random))(doing)

目录 一、Random 1. 简介 2. 什么是种子 3. 相关方法 4. Random对象的生成 5. Random类中的常用方法 6. 使用 6.1. 创建对象 6.2. 生成[0,1.0)区间的小数 6.3. 生成[0,5.0)区间的小数 6.4. 生成[1,2.5)区间的小数 6.5. 生成任意整数 6.6. 生成[0,10)区间的整数 6.…

LCP9回文数[leetcode-9-easy]

LCP&#xff0c;9回文数 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数 是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 例如&#xff…

Vue 3 的 emit 简单使用

在 Vue 3 中使用 emit&#xff0c;子组件可以将事件通知父组件&#xff0c;父组件可以在响应这些事件时执行特定的逻辑。 emit 是一种非常灵活的通信方式&#xff0c;允许组件之间以解耦的方式进行交互。 1. 基本用法 1、使用 defineEmits 子组件 <template><div…

【Hadoop】知识点总结、大学期末复习

博主简介&#xff1a;努力学习的22级计算机科学与技术本科生一枚&#x1f338;博主主页&#xff1a; Yaoyao2024往期回顾&#xff1a; 【论文精读】上交大、上海人工智能实验室等提出基于配准的少样本异常检测框架超详细解读&#xff08;翻译&#xff0b;精读&#xff09;每日一…