【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 ...
随机推荐
- maven私仓搭建——nexus3
maven私仓搭建——nexus3本文主要介绍maven私仓在windows下的搭建.本文主要参考:http://www.cnblogs.com/bingyeh/p/5913486.html好,下面上 ...
- Java8使用lambda遍历List、Set、map
public static void main(String[] args){ Map<String,String> map= new HashMap<>(); map.for ...
- Array、Set、Map、Object学习总结
Array和Set对比 都是一个存储多值的容器,两者可以互相转换,但是在使用场景上有区别.如下: Array的indexOf方法比Set的has方法效率低下 Set不含有重复值(可以利用这个特性实现对 ...
- char()和VARCHAR()的主要区别是什么?
1.char的长度是不可变的,而varchar的长度是可变的 字段b:类型char(10), 值为:abc,存储为:abc (abc+7个空格) 字段d:类型varch ...
- uniapp开发微信小程序跳转出现navigateTo:fail page "pages/user/pages/user/address/address" is not found
在app.json文件中pages中: ,{ "path" : "pages/user/address/address", "style" ...
- http学习--常用请求方法和响应状态码
常用的http请求方法: GET方法:请求服务器资源,并返回 POST方法:向指定资源提交数据进行处理请求(比如说表单,上传文件等).数据被包含在请求体中.POST请求可能会导致新的资源建立或已有资源 ...
- node监视文件或者文件夹的变化
1.node提供一个watch这个API,可以监视文件或文件夹的变化,当发生改变时,做出某些操作.(当做代码本地构建时,经常使用) const fs = require('fs'); fs.watch ...
- 什么是DOM(文档对象模型)?
㈠什么是DOM? 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口. DOM 定义了访问 HTML 和 XML 文档的标准: ...
- CF 354 div2 B 酒杯金字塔
B. Pyramid of Glasses time limit per test 1 second memory limit per test 256 megabytes input standar ...
- ubuntu搭建、安装gitlab服务器以及初始化密码
本为14.04 在搭建之前要确定其网络环境是没有问题.用root身份进行操作 1.安装和配置必要的依赖关系 apt-get update apt-get install -y curl openssh ...