使用的是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. 【AGC 036C】GP2

    https://atcoder.jp/contests/agc036/tasks/agc036_c 题意 有一个长度为 $n$ 的非负整数序列 $x$,初始时全为 $0$.一次操作定义为选择一对正整数 ...

  2. msvsmon.exe xp下不能运行

    远程调试   xp 下不能执行 vs2013 远程调试器 xp下不能运行 vs2010 远程调试器 xp下可以运行

  3. mysql每日数据统计

    select a.click_date from ( SELECT curdate() as click_date union all day) as click_date union all day ...

  4. Linux tcpdump命令详解与Wireshark

    简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...

  5. 【51nod1672】区间交

    题目大意:给定一个长度为 N 的序列,以及 M 个区间,现从中选出 K 个区间,使得这些区间的交集区间的点权和最大,求最大值是多少. 题解: 发现直接选 K 个区间不可做,考虑从答案入手.设答案区间为 ...

  6. python算数、逻辑运算,位运算

    算术运算符 对变量和数组进行算术运算. 算术运算符:+,-,*,/,% +:将连个或者多个数值相加 -:将两个数值相减 *:将两个数值相乘 /:将两个数值相除 %:取相除的余数 赋值运算符 将右边的值 ...

  7. nginx在一个服务器上配置两个项目,并通过两个不同的域名访问

    Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,由俄罗斯的程序设计师Igor Sysoev所开发,其特点是占有内存少,并发能力强. 话不多说,先从最基 ...

  8. 自动化登录QQ脚本

    1.准备第三方包: py -3.6 -m pip install win32gui py -3.6 -m pip install Pywin32 py -3.6 -m pip install pyHo ...

  9. linux 能ping通IP但无法解析域名

    vi /etc/nsswitch.conf hosts: files dns networks: files 改成: hosts: files dns wins networks: files 最近碰 ...

  10. BZOJ 3697: 采药人的路径 点分治

    好久不做点分治的题了,正好在联赛之前抓紧复习一下. 先把边权为 $0$ 的置为 $-1$.定义几个状态:$f[dis][0/1],g[dis][0/1]$ 其中 $f$ 代表在当前遍历的子树内的答案. ...