组件中包括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成员的更多相关文章

  1. react state为数组时插入值

    react state为数组时,如何插入值.在react里,一切皆是状态state,如果想通过改变state修改渲染效果,只能yongsetState.但是setState又是key:value格式, ...

  2. React state的使用

    相对于angular.js的双向数据绑定,React 可以使用State来实现. React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). this ...

  3. React——state

    在React--组件中介绍过组件有两种定义方式:函数形式以及类形式.但是要想在组件中使用state,就必须使用类形式定义组件. 组件中的state是组件私有的,完全由组件自己控制. 使用类形式定义一个 ...

  4. React state和props使用场景

    一个组件的显示状态可以由内部状态state.外部参数props所决定. props: 1.props 是从外部传进组件的参数,主要是父组件向子组件传递数据. 2.props 对于使用它的组件来说是只读 ...

  5. React State(状态)

    function FormattedDate(props){ return ( <h1>现在是{props.date}</h1> ) } class Clock extends ...

  6. React state状态

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. react篇章-React State(状态)-组件都是真正隔离的

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  8. react篇章-React State(状态)-数据自顶向下流动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. react篇章-React State(状态)-将生命周期方法添加到类中

    将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...

随机推荐

  1. JavaScript 区分中英文字符的两种方法: 正则和charCodeAt()方法

    正则无疑是最强大的判断各种条件的方法, 最近也在研习它, 虽然枯燥, 但仍有乐趣. 用它来判断一个双字节的中文字符也是轻而易举地. 而判断中文字符,  简单且执行效率高. regExpForm.onb ...

  2. 10#Windows注册表的那些事儿

    引言 用了多年的Windows系统,其实并没有对Windows系统进行过深入的了解,也正是由于Windows系统不用深入了解就可以简单上手所以才有这么多人去使用.笔者是做软件开发的,使用的基本都是Wi ...

  3. Linux启动顺序、运行级别及开机启动

    一.启动顺序 当我们经过BIOS引导,并选择了Linux作为准备引导的操作系统后,接下来的执行顺序如下:1.加载并执行内核 第一个被加载的东西就是内核.然后把内核在内存中解压缩,就可以开始运行了.2. ...

  4. 北京大学Cousera学习笔记--6-计算导论与C语言基础--计算机的基本原理-认识程序设计语言 如何学习

    1.是一门高级程序语言 低级语言-机器语言(二进制) 汇编语言-load add save mult 高级语言:有利于人们编写理解 2.C语言的规范定义非常的宽泛 1.long型数据长度不短于int型 ...

  5. IIS部署Angular2

    因為Angular無刷新的特性,所以瀏覽器地址欄上的網址其實不會真實映射到磁盤的特定位置,所以我們需要安裝.Rewrite Module, 如下: Web.config 如下: <?xml ve ...

  6. 初识JDBC

    1,概念: JDBC(Java DateBase Connective) ,即利用Java语言操作数据库语言 2,示例:Mysql中的JDBC 1,新建一个Dynamic Web Projectx项目 ...

  7. zuul 自定义路由规则

    1,zuul的maven配置 <!--spring cloud 相关包--><parent> <groupId>org.springframework.boot&l ...

  8. VS2017不能弹出安装界面的原因.

    如果这里选中了放大.100%入坑 解决办法:  禁用视觉主题,和元素,即可安装正常

  9. JavaScript--图片放大镜

    图片放大镜的原理: 两张相同的图片img1和img2,img1上有一个#dd的div,通过鼠标移动dd,根据dd区域内的图片,来裁剪img2的图片,并将img2的图片放大,显示出来 关键词:img1坐 ...

  10. 火狐开发----Web开发者工具

    作为开发Web相关人员,有必要了解这个开发工具,会提供给你不少的帮助,进入正题.经典的F12启动,这个大家都知道. 一 控制台可以很好的帮我们掌控错误,包括文件的加载.JS语法.CSS语法.安全问题. ...