antd 给input设置值_React中input框设置value报错解析

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

表单是前端非常重要的一块内容，并且往往包含了错误校验等逻辑。

React对表单元素做了专门的优化处理，他对表单元素做了一些抽象，使得他们的使用方式更统一更规范。

约束性和非约束性组件

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

约束性组件，简单的说，就是由react管理了它的value，而非约束性组件的value就是原生的DOM管理的。

他们的写法上也有很大区别。

非约束性组件这么写：

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

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

//...省略部分代码

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来实现的。

但是一定要注意，约束性组件显示的值和用户输入的值虽然很多时候是相同的，但他们根本是两码事。约束性组件显示的

antd 给input设置值_React中input框设置value报错解析相关推荐

antd 给input设置值_Antd 中 Input 组件默认值的显示
1.input标签中有placeholder可以显示默认值但是有少量样式的问题(字体颜色会淡一点) placeholder属性 2.用Input组件中的defaultValue属性 defaultV ...
SQL中常见的6个报错
本篇讲讲SQL中常见的一些报错,内容节选自<对比Excel,轻松学习SQL数据分析>一书. 1 表名错误如果数据库中没有某张表,或者你在写代码的时候把表名写错了,都会导致程序找不到这张表 ...
elasticsearch部署过程中各种报错解析
elasticsearch.bootstrap.StartupException: java.lang.RuntimeException: can not run elasticsearch as r ...
在使用单选、多选、下拉组件时，v-mode绑定的值的类型不准确引起显示报错注意
在使用不同ui库单选多选下拉组件时,有一个常常会被新手忽视的问题:那就是v-model绑定值的类型统一,比如明明在data中给的默认值是数字类型,但是在option中又用的字符串,这就导致,这就导致设 ...
在eclipse中导入工程后@Override报错
在eclipse中导入工程后@Overide报错到入工程后,所有的@Override都报如下错误: Multiple markers at this line - The method ge ...
【错误记录】PyCharm 中从 GitHub 中 Clone 代码到本地报错 ( OpenSSL SSL_read: Connection was reset, errno 10054 )
文章目录一.报错信息二.解决方案一.报错信息在 PyCharm 中从 GitHub 中 Clone 代码到本地报错 : 10:01:37.091: [C:\Users\octop\Pychar ...
php总是报错,php - 简单工厂模式中的问题，总是报错
php - 简单工厂模式中的问题,总是报错 PHPzhong2017-04-11 09:53:49 0 3 101 //接口 interface calc{ public function g ...
ibatis mysql 同时删多个表报错_MySQL中Multiple primary key defined报错的解决办法
MySQL中Multiple primary key defined报错的解决办法创建主键可以有两种方式: create table 表名( 字段名类型, 字段名类型, -- primary k ...
Mysql存储过程老是报错_mysql中看看这个存储过程老是报错,该如何处理
mysql中看看这个存储过程老是报错我的mysql版本是5.5.21的,下面这个存储过程是需要更加另外3张表的数据来更新strategycontracttemp中数据,但是每次更新到中途报错,先代码 ...

antd 给input设置值_React中input框设置value报错解析

antd 给input设置值_React中input框设置value报错解析相关推荐

最新文章

热门文章