受控组件与非受控组件
受控组件与非受控组件
- 受控组件
在使用表单来收集用户输入时,例如<input>、<select>、<textarea>等元素都要绑定一个change
事件,当表单状态发生变化时,就会触发onChange
事件,更新组件的state。这种组件为受控组件,在受控组件中,组件渲染出的状态与它的value或checked属性相对应,react通过这种方法消息组件的局部状态,是整个状态可控。
受控组件更新state的流程:
- 可以通过初始state中设置表单的默认值
- 每当表单的值发生变化时,调用onChange事件处理器
- 事件处理器通过事件对象e拿到改变后的状态,并更新组件的state
- 一旦通过setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新
受控组件的缺陷:
表单元素的值都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的值就必须每个都编写事件处理函数,这会让代码看起来很臃肿,所以为了解决这种情况,出现了非受控组件。
- 非受控组件
如果一个表单组件没有value或checked属性时,就是非受控组件。在非受控组件中,可以使用一个ref来获取DOM中的表单值,而不是为每个状态更新编写一个事件处理函数。
如下第一个<input>是一个非受控组件,它通过ref获取input输入框输入的值。
class NameForm extends React.Component {constructor(props) {super(props);this.handleSubmit = this.handleSubmit.bind(this);}handleSubmit(event) {alert('A name was submitted: ' + this.input.value);event.preventDefault();}render() {return (<form onSubmit={this.handleSubmit}><label>Name:<input type="text" ref={(input) => this.input = input} /></label><input type="submit" value="Submit" /></form>);}
}
页面中所有输入类的DOM如果是现用现取得称为非受控组件,而通过setState将输入的值维护到state中,需要时再从state获取,数据就受到了state得控制,这样的就是受控组件。
受控组件与非受控组件相关推荐
- [react] 受控组件和非受控组件有什么区别?
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介 我 ...
- 深入react技术栈(10):受控组件和非受控组件
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣 受控组件 非受控组件 受控组件和非受控组件的区别 文章参考深入React技术栈
- 受控组件和非受控组件
受控组件和非受控组件 React的受控组件与非受控组件的概念是相对于表单而言的,在React中表单元素通常会持有一下内部的state,因此它的工作方式与其他HTML元素不一样,而获取表单元素内部sta ...
- React中受控组件和非受控组件
受控组件 在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
- React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件 表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...
- React-表单处理(受控组件,非受控组件)
受控组件: value值受到了react状态控制的表单元素 React中将state中的数据与表单元素的value值绑定到了一起,由state的值来控制表单元素的值 非受控组件: 非受控组件借助于re ...
- React---什么是受控组件、非受控组件
受控组件: 在随后的用户输入中,能够控制表单中输入元素的组件被称为受控组件,即每个状态更改都有一个相关联的处理程序. 例如,我们使用下面的 handleChange 函数将输入框的值转换成大写: ha ...
- 【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的. 一.受控组件 表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修 ...
- 【REACT-受控组件和非受控组件】
REACT-受控组件和非受控组件 概述 受控组件 非受控组件 受控组件应用ToDoList 概述 React中的组件根据是否受React控制可分为受控的和非受控的. React 中的受控组件和非受控组 ...
- React的受控组件和非受控组件
一.受控组件 表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验. 受控组件只 ...
最新文章
- 单一窗口关区备案_单一窗口税费支付权限管理
- getdate函数_SQL日期函数和GETDATE解释为带有语法示例
- 程序员眼中的英文单词竟是这样的
- hdu 5248(二分+贪心)
- vscode 新建cpp文件_利用vscode搭建c
- SAP Spartacus 基于行项目的订单取消功能(order cancel)实现
- VS Code 黑宝书背后的故事
- Asp.Net Core对接钉钉群机器人
- jpa和hibernate_使用JPA和Hibernate有效删除数据
- (转)运维角度浅谈MySQL数据库优化
- iptables表与链的相关性图
- python程序员面试题精选100题_在Python程序员面试中被问的最多的10道题
- 用Python做图像处理(PIL库的使用)
- vb与php通讯加密,在VB.NET中加密和在PHP中解密
- 可视化工具 VTK 简介
- 汇编语言-字符串大写转小写,小写转大写
- 【Python】Numpy生成等差数组
- 类似三角形数的一般推导公式
- mysql blob 读取 图片_mysql中以blob形式存储的图片文件 通过ajax方式传输 在js中设置成img控件的src...
- 关于自动化测试的定位及一些思考
热门文章
- 请问 byte 与 bit 有什么区别?
- 【WPS表格】表格左右列/上下行内容互换位置
- 云服务器linux(centos)系统下Rstudio的下载及连接R语言软件
- 浅析Web Worker及实践
- 分布式事务-Atomikos解决多数据源事务问题
- 心绪不宁的时候就该写点东西,审视一下自己的内心吧
- 【总结】使用livy 提交spark任务时报错Connection refused
- 点云工具CloudCompare安装与使用
- 左右端点相同的开区间和闭区间/半开半闭区间 之间的一一映射怎么构造
- 关于SpringCloud消费者报I/O error on GET request for...的错误