使用的是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输入框可输入的最好实现方式的更多相关文章

  1. input输入框提交输入的值的方式

    给button添加点击事件,通过id(getElementById)获取输入框的value. 弹框提示如图

  2. input输入框限制输入正整数、小数、字母、文字

    有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...

  3. input输入框只能输入数字和 小数点后两位

    //input输入框只能输入数字和 小数点后两位 function num(obj,val){ obj.value = obj.value.replace(/[^\d.]/g,"" ...

  4. 在HTML中限制input 输入框只能输入纯数字

    限制 input 输入框只能输入纯数字 onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就是在 ...

  5. 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时间进行校验   ...

  6. Html限制input输入框只能输入数字

    限制输入框只能输入数字, onafterpaste防止用户从其它地方copy内容粘贴到输入框: <input type="text" onkeyup="this.v ...

  7. input输入框只能输入正整数、字母、小数、汉字

    只需将需要的代码加入到input输入框中,即可使用! 1,文本框只能输入数字代码(小数点也不能输入) 代码如下: <input onkeyup="this.value=this.val ...

  8. 今天碰到一个问题,怎么限制用户在固定宽度的input输入框里输入的长度,由此涉猎到了maxlength属性和size属性以及它们的区别。

    最开始想首先要强制在一行,另外超出的隐藏.还有一个思路是把value的值的长度和框的长度怎么联系起来,具体怎么联系我也不知道. 在解决另外一个问题的时候,哥发给我的代码里无意中看见input有个max ...

  9. input输入框只能输入正整数正则

    input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="i ...

随机推荐

  1. Ubuntu下查看so文件的函数列表

    Ubuntu下查看so文件的函数列表   可使用如下命令: 1.nm -D XXX.so 2.objdump -tT  XXX.so   nm libcyusb.so | grep "usb ...

  2. pikachu-file

    1.不安全的文件下载 1.1.概述 文件下载功能在很多web系统上都会出现,一般我们当点击下载链接,便会向后台发送一个下载请求,一般这个请求会包含一个需要下载的文件名称,后台在收到请求后 会开始执行下 ...

  3. Acwing-279-自然数拆分(背包)

    链接: https://www.acwing.com/problem/content/281/ 题意: 给定一个自然数N,要求把N拆分成若干个正整数相加的形式,参与加法运算的数可以重复. 求拆分的方案 ...

  4. VM删除快照失败,磁盘空间不足,只是删除了快照名字(全网唯一解决办法)

    原创: 删除之前的快照,发现只是把名字删除了, 看着这么多文件也不知道怎么删,一顿百度google也是没找到答案 于是就自己琢磨 因为删除快照的时候,是先把快照删除,然后删除无效的文件 所以先让这个盘 ...

  5. python-文件校验

    使用hashlib的md5方法对文件进行加密,目的是为了保证文件在传输的过程中是否发生变化. #!/usr/bin/python3 # coding:utf-8 # Auther:AlphaPanda ...

  6. idea 导入(非maven)web项目并发布到tomcat服务器

    IDEA 2017.1版本 web项目导入并发布到Tomcat服务器 1.点击编辑项目结构 2.点击project 将项目编译输出目录改成{项目目录}/OUT,并设置项目环境,编译版本 3.点击mod ...

  7. day_work_02

    day_work_02 ------Python是一个优雅的大姐姐 作业一 设计思路(四个if一个while) 首先我先把商品用列表加元组的形式保存,然后将商品遍历出来. 键盘输入薪水. (if)判断 ...

  8. protoc 编译工具

    在进行开发 protoc 之前,你需要首先在你的计算机中安装 protoc 编译工具. 下载编译工具 进入 Protocol Buffers 的源代码中然后选择发布的版本中,找到对应的版本.项目的链接 ...

  9. HGOI 20191106

    HGOI 20191106 t1 旅行家(traveller) 2s,256MB [题目背景] 小X热爱旅行,他梦想有一天可以环游全世界-- [题目描述] 现在小X拥有n种一次性空间转移装置,每种装置 ...

  10. 使用oracle数据库的开发流程