react input 不设置onChange的常见错误截图

  

  表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑。 
  React对表单元素做了专门的优化处理,他对表单元素做了一些抽象,使得他们的使用方式更统一更规范。

 约束性和非约束性组件

  表单里面出来了一个新的概念叫“约束性组件”。那么如何理解约束性组件和非约束性组件呢。

  约束性组件,简单的说,就是由react管理了它的value,而非约束性组件的value就是原生的DOM管理的。 
  他们的写法上也有很大区别。

  非约束性组件这么写:

 <input type="text" defaultValue="a" />

  

  这个 defaultValue 其实就是原生DOM中的 value 属性。这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。

  而约束性组件是这么写的:

<input type="text" value={this.state.name} onChange={this.handleChange} />

//...省略部分代码
handleChange: function(e) {
this.setState({name: e.target.value});
}

  

  这里,value属性不再是一个写死的值,他是 this.state.name,而 this.state.name 是由 this.handleChange 负责管理的。 
  这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程,实际它依然是通过设置input的value来实现的。

  但是一定要注意,约束性组件显示的值和用户输入的值虽然很多时候是相同的,但他们根本是两码事。约束性组件显示的是 this.state.name 的值。你可以在handleChange中对用户输入的值做任意的处理,比如你可以做错误校验。

  对比约束性组件和非约束性组件的输入流程:

  非约束性组件: 用户输入A -> input 中显示A
  约束性组件: 用户输入A -> 触发onChange事件 -> handleChange 中设置 state.name = “A” -> 渲染input使他的value变成A

  正式因为这样,强烈推荐使用约束性组件,因为它能更好的控制组件的生命流程。

React中input框设置value报错解析的更多相关文章

  1. iOS-解决iOS8及以上设置applicationIconBadgeNumber报错的问题

    在IOS7中设置applicationIconBadgeNumber不会有什么问题,但是直接在IOS8中设置applicationIconBadgeNumber会报错.因为在IOS8中要想设置appl ...

  2. 【jQuery】jquery中 使用$('#parentUid').attr(parentUid);报错jquery-1.11.3.min.js:5 Uncaught TypeError: Cannot read property 'nodeType' of undefined

    jquery中 使用$('#parentUid').attr(parentUid);报错jquery-1.11.3.min.js:5 Uncaught TypeError: Cannot read p ...

  3. 在React组件unmounted之后setState的报错处理

    最近在做项目的时候遇到一个问题,在 react 组件 unmounted 之后 setState 会报错.我们先来看个例子, 重现一下问题: class Welcome extends Compone ...

  4. SQL server 维护计划中 “清除维护任务” 执行报错

    SQL server 维护计划中 “清除维护任务” 执行报错,错误如下: 执行查询“EXECUTE master.dbo.xp_delete_file 0,N'',N'',N'2019...”失败,错 ...

  5. python中引入包的时候报错AttributeError: module 'sys' has no attribute 'setdefaultencoding'解决方法?

    python中引入包的时候报错:import unittestimport smtplibimport timeimport osimport sysimp.reload(sys)sys.setdef ...

  6. android 程序中res/values-v14/styles.xml报错的解决办法

    从旧的ADT迁移的新的ADT时, android 程序中res/values-v14/styles.xml报错: error: Error retrieving parent for item: No ...

  7. MySQL中遇到的几种报错及其解决方法

    MySQL中遇到的几种报错及其解决方法 1.[Err] 1064 - You have an error in your SQL syntax; check the manual that corre ...

  8. eclipse 中 import sun.misc.BASE64Decoder; 报错

    from://http://blog.sina.com.cn/s/blog_48964b120101ahrf.html 在android做3DES加密功能时 eclipse 中 import sun. ...

  9. Eclipse中导入项目后js报错解决方法(转未解决问题)

    本文转自:http://blog.csdn.net/chenchunlin526/article/details/54666882 Eclipse中导入项目后js报错的原因与解决方法 在我们将项目导入 ...

随机推荐

  1. 移动端的拖拽排序在react中实现 了解一下

    最近做一个拖拽排序的功能找了好几个有一个步骤简单,结合redux最好不过了,话不多说上代码 第一步: npm install react-draggable-tags --save 第二步 sort. ...

  2. Oozie 安装及 examples app 的使用

    参考文档 一.Building OOzie 特别注意的是修改Pom.xml文件中的版本与本机中安装的版本相同 二. install Oozie 1.为 hadoop 添加 Oozie 的代理用户,添加 ...

  3. Docker构建nginx+uwsgi+flask镜像(二)

    Dockerfile搭建环境并打包应用 在上一章Docker构建nginx+uwsgi+flask镜像(一)的学习中,我们学会用命令行一句一句在alpine环境中搭建nginx+uwsgi+flask ...

  4. Managing WMI security

    TechNet Library TechNet Archive Windows Server 2003 Product Help Windows Server 2003 Product Help Ad ...

  5. jQuery监控动画执行完毕事件

    $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend' ...

  6. Lua语言中文手册 转载自网络

    Programming in LuaCopyright ® 2005, Translation Team, www.luachina.net Programming in LuaProgramming ...

  7. B树、B-树、B+树、B*树 红黑树

    转载自:http://blog.csdn.net/quitepig/article/details/8041308 B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): ...

  8. Java 遍历Map集合的方法

    方法一:通过Map.keySet,遍历key和value Map<String, Object> map = new HashMap<>(); for (String key ...

  9. Python IO关于mode参数的问题

    关于open()的mode参数: 'r':读 'w':写 'a':追加 'r+' == r+w(可读可写,文件若不存在就报错(IOError)) 'w+' == w+r(可读可写,文件若不存在就创建) ...

  10. mongoDB坑

    1 mongodb.cnf文件中有个选项为bind_id:127.0.0.1,如果是测试环境,需要远程访问的话,就先改成0.0.0.1 auth:如果只是学习的话,建议先改成false,否则后面会有各 ...