<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

  var MySwitch = React.createClass({
    getInitialState:function(){
      return {switch:false}
    },
    handleClick:function(){
      this.setState({switch:!this.state.switch});
    },
    render:function(){
      return <button onClick={this.handleClick}>
        {"当前状态为："+this.state.switch}
      </button>
    }
  })
  ReactDOM.render(
  <MySwitch/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React state状态的更多相关文章

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

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

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

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

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

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

  4. React State(状态)

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

  5. react篇章-React State(状态)

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

  6. 原生 JavaScript 实现 state 状态管理系统

    原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在 ...

  7. react state为数组时插入值

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

  8. React + MobX 状态管理入门及实例

    前言 现在最热门的前端框架,毫无疑问是React. React是一个状态机,由开始的初始状态,通过与用户的互动,导致状态变化,从而重新渲染UI. 对于小型应用,引入状态管理库是"奢侈的&qu ...

  9. React的状态管理工具

    Mobx-React : 当前最适合React的状态管理工具   MobX 简单.可扩展的状态管理        MobX 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商 ...

随机推荐

  1. python3 练习题(购物车)

    '''购物车程序需求:1.启动程序后,让用户输入工资,然后打印商品列表2.允许用户根据商品编号购买商品3.用户选择商品后,检查余额是否够,够就直接扣款,不够就提醒4.用户可一直购买商品,也可随时退出, ...

  2. HttpMessageNotReadableException(一)

    1.今天移动端调用接口时候出现下面异常 org.springframework.http.converter.HttpMessageNotReadableException: JSON parse e ...

  3. 分布式缓存技术redis系列（三）——redis高级应用（主从、事务与锁、持久化）

    上文<详细讲解redis数据结构(内存模型)以及常用命令>介绍了redis的数据类型以及常用命令,本文我们来学习下redis的一些高级特性. 安全性设置 设置客户端操作秘密 redis安装 ...

  4. Omi框架学习之旅 - 生命周期 及原理说明

    生命周期 name avatars company constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完 ...

  5. python 经典博客链接

    1, 从文件的读取与输出: http://www.cnblogs.com/xuxn/archive/2011/07/27/read-a-file-with-python.html http://www ...

  6. Windows下jupyter notebook 修改打开的浏览器

    1. 打开cmd,输入jupyter notebook --generate-config 2. 根据返回的路径打开 C:\Users\Administrator\.jupyter\jupyter_n ...

  7. CF915G Coprime Arrays 莫比乌斯反演、差分、前缀和

    传送门 差分是真心人类智慧--完全不会 这么经典的式子肯定考虑莫比乌斯反演,不难得到\(b_k = \sum\limits_{i=1}^k \mu(i) \lfloor\frac{k}{i} \rfl ...

  8. Luogu3793 由乃救爷爷 分块、ST表

    传送门 因为昨天写暴力写挂在UOJ上用快排惨遭卡常,所以今天准备写一个卡常题消遣消遣,然后时间又垫底了QAQ 这道题显然需要支持一个\(O(N)\)预处理\(O(1)\)查询的ST表,显然普通的ST表 ...

  9. xml解析 使用dom4j操作xml

     使用dom4j操作xml 1 导入 dom4j,的jar包   2 指定要解析的XML文件 SAXReader sr=new SAXReader(); Document document= sr.r ...

  10. python中使用pymongo操作mongo

    MongoDB是由C++语言编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储形式类似JSON对象,它的字段值可以包含其他文档.数组及文档数组,非常灵活.在这一节中,我们就来看 ...