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 中被称为挂载. ...
随机推荐
- C++实验二——函数重载、函数模板、简单类的定义和实现
一.实验过程 函数重载编程练习 实验要求:编写重载函数add(),实现对int型,double型,complex型数据的加法.在main函数中定义不同类型的数据,调用测试. 代码实现: 先是简单的体验 ...
- redis 列表(list)函数
列表(list)函数 lPush 命令/方法/函数 Description Adds the string value to the head (left) of the list. Creates ...
- git clone git@github.com:snuglove/ 报错
[root@qc_centos7_5 ~]# git clone git@github.com:snuglove/Job-hunting-related.git Cloning into 'Job-h ...
- 生产环境nginx配置文件(带https安全认证)
#user www www; worker_processes 2; error_log logs/error.log info; pid /usr/local/nginx/nginx.pid; wo ...
- 【Spark-SQL学习之二】 SparkSQL DataFrame创建和储存
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...
- [十二省联考2019]骗分过样例 luoguP5285 loj#3050
不解释(因为蒟蒻太弱了,肝了一晚受不了了...现在省选退役,这有可能就是我做的最后一题了... #include<bits/stdc++.h> using namespace std; # ...
- 阿里云windows 2008 服务器处理挖矿程序 Miner
阿里云盾最近报发现wanacry蠕虫病毒和挖矿进程异常 仔细检查进程后,发现两个奇怪的进程 Eternalblue-2.2.0.exe,winlogins.exe 特别是伪装成 winlogins.e ...
- DocumentEvent事件的应用
将用户在一个文本区输入的单词按字典序排好后放入另一个文本区,并添加菜单 example002类 package example; public class example002 { public st ...
- 【双目备课】《学习OpenCV第18章》相机模型与标定整编
一.相机模型 针孔模型.在这个简单模型中,想象光线是从场景或一个很远的物体发射过来的,但只有一条光线从该场景中的任意特定点进入针孔. 我们将这个图像进行抽象,就能够得到这样的结果: 其中,f为像到针孔 ...
- 物理层PHY 和 网络层MAC
PHY模块简介 物理层位于OSI最底层,物理层协议定义电气信号.线的状态.时钟要求.数据编码和数据传输用的连接器. 物理层的器件称为PHY. 上图里的灰色方框图里的就是PHY芯片内部模块图. MAC器 ...