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 中被称为挂载. ...
随机推荐
- 框架的一些bug问题记录
关于java后台生成的mis表,在添加的add页面和edit页面中无法显示,去控制台里面查看.会有些错误的信息,是由于,你的那些html的标签不正常.导致无法显示. 里面有一个高级搜索,可以对这个选择 ...
- windows下C++连接mysql
平台:windows c/c++ 编译器:vs2017 项目设置:项目属性页: 1.C/C++ ->常规->附加包含目录->C:\Program Files (x86)\MySQL\ ...
- POJ 1655 求树的重心
POJ 1655 [题目链接]POJ 1655 [题目类型]求树的重心 &题意: 定义平衡数为去掉一个点其最大子树的结点个数,求给定树的最小平衡数和对应要删的点.其实就是求树的重心,找到一个点 ...
- luogu P3197 [HNOI2008]越狱
构造长度为n的串,给定m种颜色,求使得相邻两位的颜色相同的方案数 显然可以看出长度为n的串染m种颜色的总方案数为$m^{n}$ 然后来考虑相邻两位颜色不同的方案 对于第一位,有m种选择 对于剩余的n- ...
- JD-GUI反编译出现ERROR
反编译Jar包一般使用JD-GUI工具,很方便.但有时会出现异常,如下: 此时,可以辅助使用另一个工具来反编译代码:Luyten(https://github.com/deathmarine/Luyt ...
- vue中样式的典型操作(:class,:style)
<template> <div class="home-wrapper"> <div class="home-top">th ...
- JavaScript中创建对象的几种模式
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- C# 正则表达式提取字符串中括号里的值
version = Regex.Replace(str, @"(.*\()(.*)(\).*)", "$2"); //小括号() Regex rgx = new ...
- Blender学习
学习顺序(下面为引用他人的视频或博客) 51个必须知道的blender操作 https://www.bilibili.com/video/av4619930/ Blender常用快捷键一览表 http ...
- Winfon 页签切换及窗体控件自适应
由于公司的业务调整,最近不仅开发bs,还有不熟悉的cs,人手也不足,项目还多,对于cs来说,算是小白,虽然是一个人,也是硬着头皮写,拖拽控件,自定义控件.一个项目下来,对cs有了很深的认识,这里好好感 ...