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 中被称为挂载. ...
随机推荐
- go 语言环境搭建(Ubuntu + Sublime Text3 + GoSublime + gocode)
1. 首先安装go http://code.google.com/p/golang-china/wiki/Install 或者http://golang.org/doc/install这里有详细介绍. ...
- 用php写一个99乘法表
运行结果如下
- MAC 终端走代理服务器
问题描述: MAC 终端,默认不走代理服务器:即浏览器已经可以FQ,但是终端不行: 解决方案:直接设置终端的代理,本文 用的是 shadowSocksX: 打开终端,直接执行:(执行后,只对当前终端起 ...
- [CentOS] rsync同步目录进行备份文件
操作不难,网上一堆.这里列几个 CentOS7 参考地址: https://www.server-world.info/en/note?os=CentOS_7&p=rsync Copy fil ...
- keil在线烧录突然提示 No target connected #
keil在线烧录突然提示 No target connected 运行环境 IDE:keil uvsion5 微处理器:STM32F0xx 系列 烧录器:ST-LINK/V2 问题描述 烧录新程序并进 ...
- JQuery小知识
一.禁用鼠标右键 $(document).ready(function() { $(document).bind("contextmenu", function(e) { retu ...
- ok6410 nandflash 启动uboot 超过256k怎么办
1\在调试ok6410 nandflash启动uboot时,需要添加调试信息,导致uboot大于256k 2\需要修改下面几个地方 参考资料 在uboot中可以添加文字菜单,但是不够美观. 利用pho ...
- 使用jconsole监控JVM内存
首先声明:此篇博文分析的是JDK1.8. JVM内存区域总体分两类:heap区和非heap区.Jconsole中对内存划分为同样的结构,如下: heap区又分为: - Eden Space(伊甸园) ...
- HTTP劫持和DNS劫持
HTTP劫持和DNS劫持 首先对运营商的劫持行为做一些分析,他们的目的无非就是赚钱,而赚钱的方式有两种: 1.对正常网站加入额外的广告,这包括网页内浮层或弹出广告窗口: 2.针对一些广告联盟或带推广链 ...
- 小白のjava实现wc.exe功能
GitHub地址 项目完成情况 基本功能列表(已实现) wc.exe -c file.c //返回文件 file.c 的字符数 wc.exe -w file.c //返回文件 file. ...