组件中包括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. linux----------fedora 27 如何打开ssh,可以远程链接

    1.vim /etc/ssh/ssh_config   打开ssh的配置文件 2.打开22端口 3.重启sshd:systemctl restart sshd 4.设置sshd开机启动:systemc ...

  2. python模块之re模块

    # 正则表达式是用来匹配字符串的方法 # 字符串本身就有匹配方式,为什么要引入正则表达式? 因为原有的字符串匹配不出来原始的方法 # 正则匹配是用来进行模糊匹配的 s = "alex wan ...

  3. HttpClient 知识点

    1. httpClient 默认超时时间是 60秒 2.httpClient 是模拟表单提交,所以服务端接口要用HttpServletRequest request 接收  例如: request.g ...

  4. 使用PHP实现RSA算法的加密和解密

    本文提供使用RSA算法加密解密数据的PHP程序类(签名和验签的实现方式可以查看使用PHP实现RSA算法的签名和验签 这篇文章),封装了格式化公钥和私钥文件的方法,这样无论使用什么格式的公钥或者私钥都可 ...

  5. 03-python3.5-模拟购物车流程--更新追加细节注释功能

    03-python3.5-模拟购物车流程--更新追加细节注释功能: 模拟购物车更新脚本: #!/usr/bin/env python #-*- coding: utf-8 -*- #__author_ ...

  6. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165215

    2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 20165215 目录 Kali的下载及安装 网络配置 设置共享文件夹及剪切板 更新软件源 [Kali的下载及安 ...

  7. oracle 两张关联表执行更新update

    UPDATE T_ASN_DTL ad1 SET ad1.cf03=( SELECT ac.TH003 FROM "T_ASN_DTL_copy" ac WHERE ac.udf0 ...

  8. 数据库session立即生效(64---8192) SCOPE参数

    SCOPE=MEMORY|SPFILE|BOTH 指示了修改参数时的“作用域”: SCOPE=MEMORY :只在实例中修改,重启数据库后此次修改失效. SCOPE=SPFILE :只修改SPFILE ...

  9. 《CSS世界》读书笔记(十五)

    <!-- <CSS世界>张鑫旭著 --> 字母x——CSS世界中隐匿的举足轻重的角色 在各种内联相关模型中,凡是涉及垂直方向的排版或者对齐的,都离不开最基本的基线(baseli ...

  10. OLTP和OLAP的区别

    OLTP和OLAP的区别 联机事务处理OLTP(on-line transaction processing) 主要是执行基本日常的事务处理,比如数据库记录的增删查改.比如在银行的一笔交易记录,就是一 ...