<!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. ROS教程0 环境配置

    1安装环境配置(桌面进入命令行) echo "source /opt/ros/indigo/setup.bash" >> ~/.bashrc source ~/.bas ...

  2. spring-batch批处理框架

    转自 http://www.cnblogs.com/gulvzhe/archive/2011/10/21/2220260.html 这个框架没有实际操作,只是从同事处学习到,先转个好文章,以后有机会再 ...

  3. Qt中 .pro 文件和 .pri 文件简介

    *.pro 这是一个典型的Qt示例程序的.pro文件(propriprfprl.pro): TEMPLATE = app CONFIG += QT QT += core gui TARGET = pr ...

  4. Python脱产8期 Day03 2019/4/15

    一 变量的命名规范 1.只能由 字母, 数字,  _, 组成. 2. 不能以数字开头 3.避免与系统关键字重名:重名不会报错,但系统的功能就被自定义的功能屏蔽掉了(严重不建议这样来做) 4.以_开头的 ...

  5. Photoshop 基础三 制作简单按钮

    要求知识点:移动工具.选择工具.套索工具.多边行工具.文本工具.路径选择工具.裁剪.填充 一.制作简单按钮 1)新建画布,大小随便 2)画圆角矩形工具(同时定义背景色.边框是否需求.边框颜色) 3)打 ...

  6. SQL 公用表达式CTE

    一 基本用法 with mywith as(select * from Student ) select * from mywith 二 递归调用 with mywith as( select ID, ...

  7. linux笔记 - 配置与编译

    linux内核下载地址:https://www.kernel.org/ ubuntu下载内核对应源码: sudo apt-get source linux-$(uname -r) #此命令下载的源码存 ...

  8. 生成、查看文件的MD5、SHA、SHA256值

    生成文件的MD5.SHA.SHA256 Linux系统生成MD5.SHA.SHA256 md5sum file1.zip  >> MD5.txt sha1sum file1.zip > ...

  9. Luogu P3768 简单的数学题

    非常恶心的一道数学题,推式子推到吐血. 光是\(\gcd\)求和我还是会的,但是多了个\(ij\)是什么鬼东西. \[\sum_{i=1}^n\sum_{j=1}^nij\gcd(i,j)=\sum_ ...

  10. HNOI2019 JOJO

    HNOI2019 JOJO jojo这个坑填上了,然鹅还有序列这个题啊啊啊啊啊啊 膜 可持久化这个东西没有强制在线就是假的,直接建树dfs就行了 这题是kmp的加强版,每次会加一堆相同的数进来 先想一 ...