当前位置: 首页 > 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-…...

C++传记 类的定义(面向对象)

面向对象编程&#xff08;OOP&#xff09;是C的核心特性之一&#xff0c;其核心思想是“封装、继承、多态”&#xff0c;而则是实现面向对象编程的基础载体——它本质上是一种自定义的数据类型&#xff0c;用于封装一组相关的属性&#xff08;数据&#xff09;和行为&#xff0…...

如何让旧款Mac焕发新生:OpenCore Legacy Patcher终极指南

如何让旧款Mac焕发新生&#xff1a;OpenCore Legacy Patcher终极指南 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否有一台被苹果官方"遗忘"的旧款Mac&a…...

最强AI剪辑工具盘点:免费直接用,小白秒变剪辑大师!

一、AI视频剪辑新时代&#xff1a;为什么选择这些工具&#xff1f; 2025年的AI视频工具已经不再是简单的滤镜和特效叠加&#xff0c;而是真正能够理解内容、自动完成剪辑全流程的智能助手。根据权威评测&#xff0c;真正优秀的AI剪辑工具应该具备以下特点&#xff1a; 真正免费…...

自指宇宙学:存在如何通过自我描述而实在化(SRC-2024)

自指宇宙学&#xff1a;存在如何通过自我描述而实在化 Self-Referential Cosmology: How Existence Becomes Real Through Self-Description方见华 世毫九实验室 摘要&#xff1a;本文提出“自指宇宙学”(SRC)&#xff0c;论证宇宙的实在性源于其自我描述能力。我们发现&#x…...

如何让电子书阅读效率提升200%?这款开源神器彻底解决格式兼容与跨设备难题

如何让电子书阅读效率提升200%&#xff1f;这款开源神器彻底解决格式兼容与跨设备难题 【免费下载链接】koreader An ebook reader application supporting PDF, DjVu, EPUB, FB2 and many more formats, running on Cervantes, Kindle, Kobo, PocketBook and Android devices …...

VMware12虚拟机安装Mac系统全攻略:从环境配置到网络共享一站式指南

1. VMware12虚拟机安装Mac系统前的准备 在Windows环境下运行Mac系统听起来像是天方夜谭&#xff0c;但借助VMware12虚拟机&#xff0c;这件事变得出奇简单。我去年为了测试iOS应用就走过这条路&#xff0c;整个过程踩过不少坑&#xff0c;也积累了不少经验。首先需要明确的是&a…...

别再傻傻分不清!Word里‘分页符’和‘分节符’到底怎么用?一个表格横竖混排的实战案例讲透

别再傻傻分不清&#xff01;Word里‘分页符’和‘分节符’到底怎么用&#xff1f;一个表格横竖混排的实战案例讲透 每次做季度报告时&#xff0c;最让我头疼的就是那些超宽的表格——明明数据很重要&#xff0c;却因为页面宽度不够&#xff0c;硬生生被挤成密密麻麻的小字&…...

智能号码定位引擎:企业级地理信息快速响应解决方案

智能号码定位引擎&#xff1a;企业级地理信息快速响应解决方案 【免费下载链接】location-to-phone-number This a project to search a location of a specified phone number, and locate the map to the phone number location. 项目地址: https://gitcode.com/gh_mirrors…...

nRF52832上电启动全解析:从MBR到Bootloader的跳转机制与寄存器配置

nRF52832上电启动全解析&#xff1a;从MBR到Bootloader的跳转机制与寄存器配置 当nRF52832芯片通电瞬间&#xff0c;一场精密的硬件芭蕾在微秒级时间内悄然上演。这颗蓝牙低功耗SoC的启动流程远非简单的"通电即运行"&#xff0c;而是涉及存储器分区、寄存器配置和多重…...

RWKV7-1.5B-g1a开源模型优势:无依赖离线加载+低维护成本

RWKV7-1.5B-g1a开源模型优势&#xff1a;无依赖离线加载低维护成本 1. 模型简介 rwkv7-1.5B-g1a 是基于新一代 RWKV-7 架构的开源文本生成模型&#xff0c;专为轻量级应用场景设计。这个1.5B参数的模型在多语言处理上表现出色&#xff0c;特别适合以下场景&#xff1a; 基础问…...