<!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. pump模块的学习-metamask

    pump = require('pump') pump简介 https://github.com/terinjokes/gulp-uglify/blob/master/docs/why-use-pum ...

  2. Percona XtraDB Cluster集群

    官网参考地址: https://www.percona.com/doc/percona-xtradb-cluster/LATEST/configure.html 前期准备: 都用的root权限或使用s ...

  3. nginx安装升级及配置详解

    1.简介 2.安装配置 3.配置文件介绍 4.启动.停止.平滑重启.升级 一.Nginx简介 Nginx(engine x)是俄罗斯人Igor Sysoev编写的一款高性能的http和反向代理服务器. ...

  4. 高阶函数 - aop面向切面编程

    Function.prototype.before = function(beforefn) { var __self = this; return function() { beforefn.app ...

  5. 学习Angularjs向数据库添加数据

    今天学习angularjs向数据库添加数据. 学习此篇,得从以往几篇开始,因为那还有创建数据表等演示. 现在来创建一个添加的存储过程: SET ANSI_NULLS ON GO SET QUOTED_ ...

  6. （一）在 Blend 中绘制形状和路径

    原文:(一)在 Blend 中绘制形状和路径 https://docs.microsoft.com/zh-cn/previous-versions/jj170881(v=vs.120) 在 Blend ...

  7. 【php增删改查实例】第十七节 - 用户登录（1）

    新建一个login文件,里面存放的就是用户登录的模块. <html> <head> <meta charset="utf-8"> <sty ...

  8. C# 大型电商项目性能优化（一）

    经过几个月的忙碌,我厂最近的电商平台项目终于上线,期间遇到的问题以及解决方案,也可以拿来和大家多做交流了. 我厂的项目大多采用C#.net,使用逐渐发展并流行起来的EF(Entity Framewor ...

  9. 手动编写的几个简单的puppet管理配置

    puppet在自动化配置管理方面有很强大的优势,这里就不做过多介绍了,下面记录下几个简单的puppet管理配置: 一.首先在服务端和客户端安装puppet和facter 1)服务端 安装Puppet ...

  10. Mysql抓包工具 - MySQL Sniffer 使用小结 (含带general_log日志)

    在mysql运维工作中,一般会使用tcpdump做一些分析(直接读分析日志比较难以看明白,在数据库连接值高时使用):对于mysql实时的连接监控分析,通常会使用"mysqladmin/sho ...