【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 ...
随机推荐
- usb server
usb server 是通道型的,驱动在客户端安装 服务端不需要驱动
- 泛型 class TimeComparator<Asr> implements Comparator<Asr>
class TimeComparator<Asr> implements Comparator<Asr> 为何需要改为 class TimeComparator impleme ...
- spring+mybatis 多数据源的配置
方式一: 参见博客https://www.cnblogs.com/AmbitiousMice/p/6027674.html 此种方式每次需要在调用dao的时候设置对应的数据源. 方式二: 直接在myb ...
- linux下PHP扩展安装memcache模块
linux下PHP扩展安装memcache模块 roid 安装环境RHEL 4Php 5.2.6 所需软件libevent-1.4.6-stable.tar.gz (http://monkey.o ...
- 2017 网易游戏互娱游戏研发4.21(offer)
网易游戏互娱(offer) 去年这个时候就参加过网易游戏的实习生招聘,到今年总共收到了4次拒信.不过这次运气好,终于get了最想要的offer.去年实习生互娱笔试挂,秋招笔试挂,今年春招互娱投了连笔试 ...
- 【Linux学习二】Linux文件系统
Linux文件系统结构 ●Linux文件系统是一种倒转的单根结构 ●文件系统的根是"/" ●文件系统严格区分大小写 ●路径使用"/"分割(window下为&qu ...
- CSS层定位——固定定位,相对定位,绝对定位
主要写关于层定位的相关知识 ㈠定位概述 ⑴像图像软件中的图层一样可以对每一个layer能够精确定位操作 ⑵层定位的position属性决定了当前的一个网页元素,可以叠加到另一个网页元素上面,那么我们把 ...
- 1110 Complete Binary Tree (25 分)
Given a tree, you are supposed to tell if it is a complete binary tree. Input Specification: Each in ...
- 安装MongoDB到CentOS 6
MongoDB是一个面向海量文档存数据动态存储的NoSQL型数据库.是一个除了用于关系型数据库如MySQL,PostgreSQL数据库表格的格式,和微软SQL以外的一种数据模型存储形式.他的功能包括了 ...
- 记一次AD域控客户端不能正常加域的故障处理
1.1 症状现象 DNS 服务器无法在应用程序目录分区 < 分区名称 > 从 Active Directory 中打开区域 < 区域 >.这台 DNS 服务器配置获取并使用此 ...