使用的是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. 第一次把本地项目与git相连

    原文:https://blog.csdn.net/a987625922/article/details/82189863 新建远程仓库(github或者gitee) 将本地仓库转换成版本库,并将文件添 ...

  3. 【BZOJ1016】【Luogu P4208】 [JSOI2008]最小生成树计数 最小生成树,矩阵树定理

    蛮不错的一道题,遗憾就遗憾在数据范围会导致暴力轻松跑过. 最小生成树的两个性质: 不同的最小生成树,相同权值使用的边数一定相同. 不同的最小生成树,将其都去掉同一个权值的所有边,其连通性一致. 这样我 ...

  4. Android 腾讯bugly Tinker 热修复

    Bugly热更新是腾讯推出的热更新框架,热更新是指无需到应用市场重新下载安装app,只需要在app内下载补丁包即可实现app的更新,主要用于app的bug修复或者少量改动. 大家在使用app(特别是游 ...

  5. c++命名空间namespace

    namespace 变量作用域的作用空间,这样可以防止相同名称的变量被调用时带来的问题#include "iostream" #include <string> usi ...

  6. Django + pyecharts 实现数据可视化

    1 创建django项目 :Visualization and  APP :Demo >>django-admin startproject Visualization >>p ...

  7. 【Winfrom-DataTable填充ListView】ListView与DataTable相互转换 .net

    1.DataTable转成ListView: 先遍历DataTable的列,把DataTable列名添加到listView列头. 然后外循环添加行,内循环添加列 跟这篇文章是一样的 http://ww ...

  8. UML中的类图及类图之间的关系

    统一建模语言简介 统一建模语言(Unified Modeling Language,UML)是用来设计软件蓝图的可视化建模语言,1997 年被国际对象管理组织(OMG)采纳为面向对象的建模语言的国际标 ...

  9. no matches for kind "ReplicaSet" in version "extensions/v1beta1"

    原来的yaml的资源清单为 apiVersion: extensions/v1beta1 kind: ReplicaSet metadata: name: frontend spec: replica ...

  10. .net core 在服务器端获取api传递的参数

    在 ActionFilterAttribute 的OnActionExecutionAsync 中使用如下代码从流中读取用户参数 //从文件流中读取传递测参数 using (var ms = new ...