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

react中获取input输入框内容的两种方法

一.通过event对象信息的方式

<input onChange={(e)=>this.inputChange(e)}/>
<button onClick={()=>this.getInputValue} >获取input的值</button>inputChange(e){alert(e.target.value)this.setState({username:e.target.value})
}
getInputValue(){alert(this.state.username)
}

二.使用ref的方式

<input ref='username' onChange={()=>this.inputChange()}/>
<button onClick={()=>this.getInputValue()} >获取input的值</button>inputChange(){//获取dom节点元素//1.添加ref属性//2.使用this.refs.username获取dom节点let val=this.refs.username.value;this.setState({username:val})
}
getInputValue(){console.log(this.state.username)
}

使用ref自定义一个属性,可以通过this.refs.属性名称.value获取内容。

相关文章:

react中获取input输入框内容的两种方法

一.通过event对象信息的方式 <input onChange{(e)>this.inputChange(e)}/> <button onClick{()>this.getInputValue} >获取input的值</button>inputChange(e){alert(e.target.value)this.setState({username:e.target.value}) } getInputValue(){aler…...

Linux基础—1

1、命令行 1) 重要快捷键 按键作用Tab命令补全Ctrl强行终止当前程序Ctrld键盘输入结束或退出终端Ctrls暂停当前程序&#xff0c;暂停后按下任意键恢复运行Ctrlz将当前程序放到后台运行&#xff0c;恢复到前台为命令fgCtrla将光标移至输入行头&#xff0c;相当于Home键Ctrle将…...

十个面试排序算法

一、 前言 最常考的是快速排序和归并排序&#xff0c;并且经常有面试官要求现场写出这两种排序的代码。对这两种排序的代码一定要信手拈来才行。还有插入排序、冒泡排序、堆排序、基数排序、桶排序等。面试官对于这些排序可能会要求比较各自的优劣、各种算法的思想及其使用场景…...

技术学习群-第四期内容共享

本期是技术群聊的第四期。还是那句话&#xff0c;《群聊免费进入》。一起来看看本期分享内容。 uiautomator-Error问题 在使用u2的过程中&#xff0c;有时候需要使用到uiautomator这个工具来进行查阅层级。但是博主遇到了这么个问题。 《问题分析》&#xff1a;发生此问题的原因…...

冒泡排序/鸡尾酒排序

冒泡排序 冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法&#xff0c;它通过多次交换相邻元素的位置来实现排序。它的基本思想是从数组的第一个元素开始&#xff0c;比较相邻的两个元素&#xff0c;如果它们的顺序错误&#xff0c;则交换它们的位置。重复进…...

代码随想录算法训练营第五十三天|309.最佳买卖股票时机含冷冻期、714.买卖股票的最佳时机含手续费

代码随想录算法训练营第五十三天|309.最佳买卖股票时机含冷冻期、714.买卖股票的最佳时机含手续费 309.最佳买卖股票时机含冷冻期714.买卖股票的最佳时机含手续费 309.最佳买卖股票时机含冷冻期 题目链接&#xff1a;309.最佳买卖股票时机含冷冻期 文章链接 状态&#xff1a;有…...

【Docker】Docker的使用案例以及未来发展、Docker Hub 服务、环境安全、容器部署安全

作者简介&#xff1a; 辭七七&#xff0c;目前大二&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…...

qt qtabwidget获取当前选项卡的所有按键

要获取当前选项卡中的所有按键&#xff0c;可以通过以下步骤进行&#xff1a; 通过currentIndex()函数获取当前选项卡的索引。 使用widget()函数获取当前选项卡的QWidget。 连接QWidget的keyPressEvent事件&#xff0c;并在事件处理函数中获取按下的按键信息。 下面是示例代…...

为什么Excel插入图片不显示,点击能够显示

很久没有Excel了&#xff0c;今天在做Excel表格时&#xff0c;发现上传图片后不能显示&#xff0c;但是点击还是能够出现图片的 点击如下 点击能看到&#xff0c;但是不显示&#xff1f; 最后发现只需鼠标右键点击浮动即可显示...

使用Python创建faker实例生成csv大数据测试文件并导入Hive数仓

文章目录 一、Python生成数据1.1 代码说明1.2 代码参考 二、数据迁移2.1 从本机上传至服务器2.2 检查源数据格式2.3 检查大小并上传至HDFS 三、beeline建表3.1 创建测试表并导入测试数据3.2 建表显示内容 四、csv文件首行列名的处理4.1 创建新的表4.2 将旧表过滤首行插入新表 一…...

qml基础语法

文章目录 基础语法例子 属性例子 核心元素元素item RectangleText例子 Image例子 MouseArea例子Component&#xff08;组件&#xff09;例子简单变换例子 定位器ColumnRowGridFlowRepeater 布局InputKeys 基础语法 QML是一种用于描述对象如何相互关联的声明式语言。  QtQuick是…...

数据结构 - 2(顺序表10000字详解)

一&#xff1a;List 1.1 什么是List 在集合框架中&#xff0c;List是一个接口&#xff0c;继承自Collection。 Collection也是一个接口&#xff0c;该接口中规范了后序容器中常用的一些方法&#xff0c;具体如下所示&#xff1a; Iterable也是一个接口&#xff0c;Iterabl…...

05在IDEA中配置Maven的基本信息

配置Maven信息 配置Maven家目录 每次创建Project工程后都需要设置Maven家目录位置&#xff0c;否则IDEA将使用内置的Maven核心程序和使用默认的本地仓库位置 一般我们配置了Maven家目录后IDEA就会自动识别到conf/settings.xml配置文件和配置文件指定的本地仓库位置创建新的P…...

基于IDEA 配置Maven环境和JDK版本(全局)

1.首先启动IDEA&#xff0c;进去初始界面 选择 Customize 之后&#xff0c;选择 All settings 2. 选择下图中的列表配置 3. 找到Maven下的Runner, 配置JRE的版本&#xff0c;选择自己下载使用的jdk的版本即可 4.最后配置Compiler 下的 Java Compiler 选择自己的jdk版本号&am…...

mysql数据库 windows迁移至linux

1.打开navicat&#xff0c;选择一个数据库进行操作&#xff1a; 之后文件会保存为一个xxx.sql文件&#xff0c;之后打开xftp&#xff0c;把生成的sql放进一个文件夹中(/home/dell/linuxmysql)&#xff1a; 之后登录mysql数据库&#xff0c;并创建一个新的数据库&#xff0c;然后…...

P4491 [HAOI2018] 染色

传送门:洛谷 解题思路: 写本题需要知道一个前置知识: 假设恰好选 k k k个条件的方案数为 f ( k ) f(k) f(k);先钦定选 k k k个条件,其他条件无所谓的方案数为 g ( k ) g(k) g(k) 那么存在这样的一个关系: g ( k ) ∑ i k n C i k f ( i ) g(k)\sum_{ik}^nC_{i}^kf(i) g(k)…...

12096 - The SetStack Computer (UVA)

题目链接如下&#xff1a; Online Judge 这道题我一开始的思路大方向其实是对的&#xff0c;但细节怎么实现set到int的哈希没能想清楚&#xff08;没想到这都能用map&#xff09;。用set<string>的做法来做&#xff0c;测试数据小的话答案是对的&#xff0c;但大数据时…...

Pygame中将鼠标形状设置为图片2-1

在Pygame中利用Sprite类的派生类将鼠标形状设置为图片&#xff0c;其原理就是将Sprite类的派生类对应图片的位置设置为鼠标的当前位置即可。其效果如图1所示。 图1 将鼠标设置为图片 从图1可以看出&#xff0c;鼠标的形状变为红色的&#xff0c;该红色的随着鼠标的移动而移动&…...

Vue3 + Nodejs 实战 ,文件上传项目--实现图片上传

目录 技术栈 1. 项目搭建前期工作(不算太详细) 前端 后端 2.配置基本的路由和静态页面 3.完成图片上传的页面&#xff08;imageUp&#xff09; 静态页面搭建 上传图片的接口 js逻辑 4.编写上传图片的接口 5.测试效果 结语 博客主页&#xff1a;専心_前端,javascript,mys…...

linux C++ vscode连接mysql

1.linux使用Ubuntu 2.Ubuntu安装vscode 2.1 安装的是snap版本,直接打开命令行执行 sudo snap install --classic code 3.vscode配置C 3.1 直接在扩展中搜索C安装即可 我安装了C, Chinese, code runner, 安装都是同理 4.安装mysql sudo apt update sudo apt install mysql-…...

JY61P陀螺仪串口数据解析实战:从协议到STM32代码实现

1. JY61P陀螺仪模块初探 第一次拿到JY61P这个六轴姿态传感器时&#xff0c;我下意识以为它和常见的MPU6050差不多。但实际用下来发现&#xff0c;这个国产模块在精度和易用性上都有明显优势。最让我惊喜的是它支持串口通信&#xff0c;完美避开了I2C协议那些令人头疼的时序问题…...

VLP-16数据包解析实战:从原始字节到三维点云

1. VLP-16数据包解析入门指南 第一次拿到VLP-16激光雷达的原始UDP数据流时&#xff0c;我完全被那一串串十六进制数字搞懵了。这就像收到一封用密码写成的信&#xff0c;明明知道里面藏着宝贵的三维环境信息&#xff0c;却不知道如何破译。经过几个项目的实战积累&#xff0c;我…...

fluent_edem流固耦合方面的教学或者代做或者代码二次开发,气液固三相耦合。 接口优化...

fluent_edem流固耦合方面的教学或者代做或者代码二次开发&#xff0c;气液固三相耦合。 接口优化&#xff0c;计算速率大大提升。 模拟散体和颗粒材料的离散元法多用途仿真软件&#xff0c;支持GPU加速&#xff0c;与颗粒流软件PFC相比&#xff0c;具有友好的图形用户界面、更快…...

如何用AI提升视频画质?Video2X全攻略:从技术原理到实践应用

如何用AI提升视频画质&#xff1f;Video2X全攻略&#xff1a;从技术原理到实践应用 【免费下载链接】video2x A lossless video/GIF/image upscaler achieved with waifu2x, Anime4K, SRMD and RealSR. Started in Hack the Valley II, 2018. 项目地址: https://gitcode.com/…...

Windows 11 + Ubuntu 20.04双系统安装避坑指南(附分区方案)

Windows 11与Ubuntu 20.04双系统安装全流程精解 对于想要在现有Windows 11系统上体验Ubuntu的用户来说&#xff0c;双系统安装是最佳选择。这种方式既能保留熟悉的Windows环境&#xff0c;又能探索Linux世界的无限可能。本文将详细解析从准备到安装的完整流程&#xff0c;特别针…...

从零开始:用Arduino+ULN2003驱动28BYJ-48步进电机(附完整代码)

从零开始&#xff1a;用ArduinoULN2003驱动28BYJ-48步进电机&#xff08;附完整代码&#xff09; 在创客和硬件爱好者的世界里&#xff0c;步进电机因其精准的位置控制能力而备受青睐。28BYJ-48作为一款经济实惠的五线四相步进电机&#xff0c;配合ULN2003驱动板&#xff0c;成…...

驱动中阻塞相关函数的基础

wait_queue_head_t定义等待队列头#include <linux/wait.h> /** lock&#xff1a;自旋锁&#xff0c;用于保护队列操作&#xff08;如添加/删除等待项&#xff09;的并发安全* head&#xff1a;链表头&#xff0c;指向等待队列项的链表*/ typedef struct wait_queue_head …...

嵌入式Linux开发板CH340驱动安装避坑指南(附详细步骤图)

嵌入式Linux开发板CH340驱动安装全流程解析与疑难排错 第一次接触嵌入式Linux开发板时&#xff0c;最让人头疼的往往不是代码编写&#xff0c;而是最基础的开发环境搭建。作为连接电脑与开发板的重要桥梁&#xff0c;CH340串口驱动的安装质量直接决定了后续调试效率。许多初学者…...

3步精通Rufus:ext文件系统格式化实战攻略

3步精通Rufus&#xff1a;ext文件系统格式化实战攻略 【免费下载链接】rufus The Reliable USB Formatting Utility 项目地址: https://gitcode.com/GitHub_Trending/ru/rufus 在Linux系统管理中&#xff0c;USB设备格式化常常成为技术人员的痛点——要么工具功能单一&a…...

二维码生成新体验:Amazing-QR核心功能与个性化应用指南

二维码生成新体验&#xff1a;Amazing-QR核心功能与个性化应用指南 【免费下载链接】amazing-qr &#x1f4ae; amazing QRCode generator in Python (supporting animated gif) - Python amazing 二维码生成器&#xff08;支持 gif 动态图片二维码&#xff09; 项目地址: ht…...