一 受控组件

顾名思义,受控 也就是能够被控制,简而言之也就是 该组件ui的显示或者内部state逻辑的变化依赖外部的 props的传入。

二 非受控组件

顾名思义,非受控,也就是内部的视图变化,state变化 不依赖于外部的props的传入。

三 举列

class Input extends React.Component<any, any> {
state = {
value:''
};
constructor(props:any) {
super(props);
}
onChange(event: { target: { value: any; }; }){
this.setState({
value:event.target.value
})
}
add(){
if(!this.state.value) return;
this.props.getValue({value:this.state.value,completed:false});
this.setState({
value:''
})
}
render(){
return (
<div>
<input type="text" value={this.state.value} onChange={this.onChange.bind(this)}/>
<button onClick={this.add.bind(this)}>添加</button>
</div>
)
}
}

Input组件 视图和state变化逻辑只依赖于自身内部的实现,所以Input组件为 非受控组件

input 组件 视图依赖于传入的 state,所以input组件为受控组件

react中 受控组件和 非受控组件 浅析的更多相关文章

  1. React:受控组件与非受控组件混用实战 - 译文

    原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...

  2. 浅谈react受控组件与非受控组件

    引言 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...

  3. React受控组件和非受控组件

    受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...

  4. react 表单(受控组件和非受控组件)

    我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...

  5. Vue父子组件及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...

  6. 学习React系列(四)——受控组件与非受控组件

    受控组件:通过组件的状态与属性的改变来控制组件 不可控组件:直接通过底层的dom来控制组件(具体来说就是通过绑定再底层dom上的方法来实现的,比如说ref,onChange) 受控组件 functio ...

  7. React 受控组件和非受控组件

    需求用户名自动获取 onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange 点击按钮 获取密码 只要绑定了点击事件 就可以获取值 通过 let usercont=event. ...

  8. React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)

    本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...

  9. React - 可控组件和非可控组件的选择

    原则 受控组件(用户输入 ---> state 更新 ---> 组件更新)的消耗明显比非受控组件大的多,但非受控组件只能在需求非常简单的情况下的使用. 特性 uncontrolled 受控 ...

随机推荐

  1. 【原】react-router项目实战

    摘要: react-router相对于flux和redux来说,比较好容易理解一点和容易入门一点.这个是根据我之前的一个项目,然后我用react+react-router+webpack重新写的. 不 ...

  2. make的控制函数(error,warning)

    make的控制函数 make提供了两个控制make运行方式的函数.通常它们用在Makefile中,当make执行过程中检测到某些错误是为用户提供消息,并且可以控制make过程是否继续. 8.11.1  ...

  3. 【转载】C++中的位拷贝和值拷贝

    ---恢复内容开始--- 原文:C++中的位拷贝和值拷贝 原文:http://blog.csdn.net/liam1122/article/details/1966617 为了便于说明我们以Strin ...

  4. web前端炫酷实用的HTML5应用和jQuery插件

    又开始了新的一天,我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件,作为前端开发者来说,这些资源可以帮助你在项目开发上派上用场.下面一起来看看这些炫酷而实用的HTML5应用和jQuer ...

  5. typeof应该注意的地方(网龙公司校招笔试题)

    <script language="javascript" type="text/javascript"> alert(new String('a' ...

  6. JQuery Datatable Ajax请求两次问题的解决

    最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...

  7. Linux配置vnc

    yum install tigervnc-server vim /etc/sysconfig/vncservers 查看配置文件,修改最后面两行配置文件参数如下: VNCSERVERS="1 ...

  8. yii2.0框架debug模式

  9. Js中常用知识点(typeof、instanceof、动态属性、变量作用域)

    1.Js中各类型的常量表示形式:Number:number     String:string    Object:objec 2.typeof运算符在Js中的使用:用于判断某一对象是何种类型,返回值 ...

  10. 单片机成长之路(51基础篇) - 006 在Linux下搭建51单片机的开发烧写环境

    在Linux下没有像keli那样好用的IDE来开发51单片机,开发环境只能自己搭建了. 第一步:安装交叉编译工具 a) 安装SDCC sudo apt-get install sdcc b)测试SDC ...