react state成员
组件中包括state,props与render成员函数。
react中,主要通过定义state,根据不同state渲染对应用户界面。
过程调用了成员函数setState(data,callback)。这个函数会合并data到this.state,并重新渲染组件。渲染完成之后调用可选的callback回调。多数情况下react负责视图更新。
举个例子:
var TextBoxComponent = React.createClass({
getInitialState:()=>{
return { enable:false};
},
handClick:()=>{
this.setState({enable:!this.state.enable})
},
render(){
return (
<p>
<input type="text" disabled={this.state.enable} />
<button onClick={this.handClick}> 改变textbook状态 </button>
</p>
);
}
});
ReactDOM.render(
<TextBoxComponent />,
document.getElementById(''reactContainer'')
);
过程中,组件最初有个初始状态,通过调用方法getInitialState获取,这个方法在组件初始化的时候执行,返回一个对象或者null。getInitialState返回的对象会自动合并到this.state上,可以通过”this.state.属性名”的方式来访问属性。
这里将enable这个值和input的disable绑定,当要修改这个属性时,要使用setState方法。声明handClick方法,来绑定button上面,实现state.enable的值。
当用户单击导致状态变化时,this.setState方法修改了状态值,每次修改后,this.render会被自动调用,从而自动渲染视图。
1.getInitialState函数必须有返回值,可以是null、false、一个对象。
2.访问state数据的方法是“this.state.属性名”。
3.变量用{}包裹,不需要再加双引号。
react state成员的更多相关文章
- react state为数组时插入值
react state为数组时,如何插入值.在react里,一切皆是状态state,如果想通过改变state修改渲染效果,只能yongsetState.但是setState又是key:value格式, ...
- React state的使用
相对于angular.js的双向数据绑定,React 可以使用State来实现. React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). this ...
- React——state
在React--组件中介绍过组件有两种定义方式:函数形式以及类形式.但是要想在组件中使用state,就必须使用类形式定义组件. 组件中的state是组件私有的,完全由组件自己控制. 使用类形式定义一个 ...
- React state和props使用场景
一个组件的显示状态可以由内部状态state.外部参数props所决定. props: 1.props 是从外部传进组件的参数,主要是父组件向子组件传递数据. 2.props 对于使用它的组件来说是只读 ...
- React State(状态)
function FormattedDate(props){ return ( <h1>现在是{props.date}</h1> ) } class Clock extends ...
- React state状态
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- react篇章-React State(状态)-组件都是真正隔离的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-数据自顶向下流动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-将生命周期方法添加到类中
将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...
随机推荐
- memcached----------linux下安装memcached,以及php的memcached扩展。
1.通过wget http://www.memcached.org/files/memcached-1.4.24.tar.gz下载最新源码2.解压tar -xf memcached-1.4.24.ta ...
- [macOS] Mojave10.14 夜神安卓模拟器启动问题
废话不多说,其它的都有在这里讨论: https://bbs.yeshen.com/forum.php?mod=viewthread&tid=8566 我的最终解决办法是,virtualbox安 ...
- spring源码解析1--spring整体架构
一.Spring整体架构图 关于Spring的基本介绍就不再赘述了,先展示Spring框架的整体架构图如下示: 二.Spring结构介绍 Spring主要分为Core Container.Test.D ...
- Java EE开发技术课程第七周(json)
JSON: https://baike.baidu.com/item/JSON/2462549?fr=aladdin JSON指JavaScript对象表示法(JavaScript Object No ...
- Linux CAN Shell 测试脚本程序
2012-01-13 22:57:14 为我的开发板2440做二次开发,添加了can驱动,做了驱动测试程序,没理由不添加一个测试脚本程序啊!修改了测试程序,使应用程序更加灵活,添加了一下传递参数.接着 ...
- kubernetes集群pod使用tc进行网络资源限额
kubernetes集群pod使用tc进行网络资源限额 Docker容器可以实现CPU,内存,磁盘的IO限额,但是没有实现网络IO的限额.主要原因是在实际使用中,构建的网络环境是往超级复杂的大型网络. ...
- 20190410Linux中磁盘管理及LVM(week2day1)
Linux磁盘管理及LVM讲解(week2_day2) 硬盘接口 从整体的角度上,硬盘接口分为IDE.SATA.SCSI和SAS四种,IDE接口硬盘多用于家用产品中,也部分应用于服务器,SCSI接 ...
- C#匿名类型和动态解析减少定义传输类模板
C#作为强类型语言,在序列化和反序列化(json)场景中对字符串解析常常需要定义强类型模板,造成编码上的繁琐.其实可以使用匿名类型和动态解析减少json序列化时候的数据模板定义: string a = ...
- keras用法
关于Keras的“层”(Layer) 所有的Keras层对象都有如下方法: layer.get_weights():返回层的权重(numpy array) layer.set_weights(weig ...
- Linux error numbers
Linux error numbers, straight from the horse's mouth. #define EPERM 1 /* Operation not permitted */ ...