使用的是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. js判断网页标题包含某字符串则替换

    js判断网页标题包含某字符串则替换,代码如下: var tit=document.title; if(tit.indexOf("afish")>0){ tit=tit.rep ...

  2. [易学易懂系列|rustlang语言|零基础|快速入门|(18)|use关键词]

    [易学易懂系列|rustlang语言|零基础|快速入门|(18)|use关键词] 实用知识 use关键词 我们今天来讲讲use关键词. 1.简单来说,use是给其他方法或资源定义一个别名,然后调用者, ...

  3. Five minutes to understand async and defer

    Script tag When we want to insert a script into a web page, the standard way is to use the script ta ...

  4. 安全框架Shiro和SpringSecurity的比较

    来自:https://www.cnblogs.com/zoli/p/11236799.html 两个基本的概念 安全实体:系统需要保护的具体对象数据 权限:系统相关的功能操作,例如基本的CRUD Sh ...

  5. k8spod控制器概述

    自主式pod对象由调度器绑定至目标工作节点后即由相应节点上的kubelet负责监控其容器的存活性,容器主进程崩溃后,kubelet能够自动重启相应的容器.不过,kubelet对非主进程崩溃类的容器错误 ...

  6. IE ActiveObject

    ActiveObject只能用于基于IE内核的浏览器 需要添加信任站点 并设置对ActiveObject的启用 问题: 1.用javascript 创建ActiveX对象时出现:Automation ...

  7. python 创建实例对象

    实例化类其他编程语言中一般用关键字 new,但是在 Python 中并没有这个关键字,类的实例化类似函数调用方式. 以下使用类的名称 Employee 来实例化,并通过 __init__ 方法接收参数 ...

  8. [Flask]celery异步任务队列的使用

    Celery异步任务队列 目录结构树: 配置文件config.py: # 设置中间人地址 broker_url = 'redis://127.0.0.1:6379/1' 主main.py: impor ...

  9. [CSP-S模拟测试]:开心的金明(贪心+模拟)

    题目传送门(内部题117) 输入格式 第一行一个整数$k$,表示需要处理的月份数. 接下来的$k$行,每行$4$个整数,第$1+i$行分别为:$c_i,d_i,m_i,p_i$ 接下来的$k-1$行, ...

  10. MySQL格式化小数点为百分号并保留2为小数

    #colname为字段名字,CONCAT的作用是把小数点转成百分号,TRUNCATE的作用是保留百分号的小数点成几位 SELECT CONCAT(TRUNCATE(colname*100,2),'%' ...