使用的是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. maven私仓搭建——nexus3

    maven私仓搭建——nexus3本文主要介绍maven私仓在windows下的搭建.本文主要参考:http://www.cnblogs.com/bingyeh/p/5913486.html好,下面上 ...

  2. Java8使用lambda遍历List、Set、map

    public static void main(String[] args){ Map<String,String> map= new HashMap<>(); map.for ...

  3. Array、Set、Map、Object学习总结

    Array和Set对比 都是一个存储多值的容器,两者可以互相转换,但是在使用场景上有区别.如下: Array的indexOf方法比Set的has方法效率低下 Set不含有重复值(可以利用这个特性实现对 ...

  4. char()和VARCHAR()的主要区别是什么?

    1.char的长度是不可变的,而varchar的长度是可变的 字段b:类型char(10),     值为:abc,存储为:abc             (abc+7个空格) 字段d:类型varch ...

  5. uniapp开发微信小程序跳转出现navigateTo:fail page "pages/user/pages/user/address/address" is not found

    在app.json文件中pages中: ,{ "path" : "pages/user/address/address", "style" ...

  6. http学习--常用请求方法和响应状态码

    常用的http请求方法: GET方法:请求服务器资源,并返回 POST方法:向指定资源提交数据进行处理请求(比如说表单,上传文件等).数据被包含在请求体中.POST请求可能会导致新的资源建立或已有资源 ...

  7. node监视文件或者文件夹的变化

    1.node提供一个watch这个API,可以监视文件或文件夹的变化,当发生改变时,做出某些操作.(当做代码本地构建时,经常使用) const fs = require('fs'); fs.watch ...

  8. 什么是DOM(文档对象模型)?

    ㈠什么是DOM? 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口. DOM 定义了访问 HTML 和 XML 文档的标准: ...

  9. CF 354 div2 B 酒杯金字塔

    B. Pyramid of Glasses time limit per test 1 second memory limit per test 256 megabytes input standar ...

  10. ubuntu搭建、安装gitlab服务器以及初始化密码

    本为14.04 在搭建之前要确定其网络环境是没有问题.用root身份进行操作 1.安装和配置必要的依赖关系 apt-get update apt-get install -y curl openssh ...