【react】input输入框可输入的最好实现方式

使用的是refs。react中输入框不能直接定义value。输入框是可变的,react会提示报错。需要使用的inChange事件(输入框内容被改变时触发)。
要定义输入框初始值,需要在componentDidMount中定义,不能在componentWillMount中定义,因为render之后才能取到refs的input。使用this.refs.input1.value="初始值"。
改变输入框内容时,不会触发render重渲染。性能比更新state好。
class Input extends React.Component{
componentDidMount(){
this.refs.input1.value="初始值"
}
change(){
console.log(this.refs.input1.value)
}
render(){
return (
<div className="customForm">
<input type="text" ref="input1" onChange={this.change.bind(this)} />
</div>
)
}
}
【react】input输入框可输入的最好实现方式的更多相关文章
- input输入框提交输入的值的方式
给button添加点击事件,通过id(getElementById)获取输入框的value. 弹框提示如图
- input输入框限制输入正整数、小数、字母、文字
有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...
- input输入框只能输入数字和 小数点后两位
//input输入框只能输入数字和 小数点后两位 function num(obj,val){ obj.value = obj.value.replace(/[^\d.]/g,"" ...
- 在HTML中限制input 输入框只能输入纯数字
限制 input 输入框只能输入纯数字 onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就是在 ...
- input输入框 只能输入数字 oninput = "value=value.replace(/[^\d]/g,'')" input输入框输入大于0的数字 oninput="value=value.replace(/\D|^0/g,'')"
项目中因为利用 element-ui 和avue两个ui框架搭建的 1.利用element-ui自带的校验需要注意点 prop :rules ref这三个属性 2.利用oninput时间进行校验 ...
- Html限制input输入框只能输入数字
限制输入框只能输入数字, onafterpaste防止用户从其它地方copy内容粘贴到输入框: <input type="text" onkeyup="this.v ...
- input输入框只能输入正整数、字母、小数、汉字
只需将需要的代码加入到input输入框中,即可使用! 1,文本框只能输入数字代码(小数点也不能输入) 代码如下: <input onkeyup="this.value=this.val ...
- 今天碰到一个问题,怎么限制用户在固定宽度的input输入框里输入的长度,由此涉猎到了maxlength属性和size属性以及它们的区别。
最开始想首先要强制在一行,另外超出的隐藏.还有一个思路是把value的值的长度和框的长度怎么联系起来,具体怎么联系我也不知道. 在解决另外一个问题的时候,哥发给我的代码里无意中看见input有个max ...
- input输入框只能输入正整数正则
input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="i ...
随机推荐
- C++ 编码导致编译错误
记录一个问题 平时经常用Notepad++写C++,然后g++编译 最近出现一个莫名其妙的问题 原来是编译时遇到了非法字符 用Notepad++一看,原来文件的编码出现的变化 不是UTF-8或者其他对 ...
- TCP下的套接字服务端实现并发 作业题
# 服务端 import socket from threading import Thread """ 服务端 1.要有固定的IP和PORT 2.24小时不间断提供服务 ...
- JAVA笔记10-抽象类
(1)abstrac关键字类修饰的类是抽象类,用abstract修饰的方法是抽象方法: (2)含有抽象方法的类必须被定义为抽象类: (3)抽象类必须被继承,抽象方法必须被重写(或者将子类也声明为抽象类 ...
- 第二篇【Zabbix客户端的完整布署】
关于Zabbix服务端布署请查看 1.上传zabbix安装包(源码包默认(Server和Agent是一起的)) [root@sms-v2 ~]# ll /root/ -rw-r--r-- root r ...
- CF G. Indie Album AC自动机+fail树+线段树
这个套路挺有意思的. 把 $trie$ 和 $fail$ 树都建出来,然后一起跑一跑就好了~ #include <queue> #include <cstdio> #inclu ...
- make文件基础用法
参照:https://www.jianshu.com/p/0b2a7cb9a469 创建工作目录,包含一下文件 main.c person.c b.h c.h /*** c.h ***/ //this ...
- Codeforces 482E ELCA (LCT)
题目链接 http://codeforces.com/contest/482/problem/E 题解 T2智商题T3大LCT题,我一个也不会= = CF的标算好像是分块?反正现在LCT都普及了就用L ...
- 如何基于String实现同步锁?
在某些时候,我们可能想基于字符串做一些事情,比如:针对同一用户的并发同步操作,使用锁字符串的方式实现比较合理.因为只有在相同字符串的情况下,并发操作才是不被允许的.而如果我们不分青红皂白直接全部加锁, ...
- 后盾网lavarel视频项目---模型一对多关联简单实例
后盾网lavarel视频项目---模型一对多关联简单实例 一.总结 一句话总结: 在模型中定义一个方法来设置一对多关联:return $this->hasMany(Video::class); ...
- JAVA-Runnable、Callable、FutureTask
通常,创建线程的执行单元有两种,一种是直接继承 Thread,另外一种就是实现 Runnable 接口. 但这两种都有一个问题就是无法有返回值,且子线程在执行过程中无法抛出异常.想线程有返回值,可以使 ...