<!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. shell编程之转义和引用

    shell中有两类字符,一类是普通字符,在Shell中除了本身的字面意思外没有其他特殊意义,即普通纯文本:另一类即元字符,是Shell的保留字符,在Shell中有着特殊的含义. 一.转义 转义是指使用 ...

  2. HIS系统结算后，没有更新单据状态为“已结算”

    1.由于查询单据有个参数:时间,而应用服务器和数据库服务器存在时间差,经比对,数据库服务器时间要快7秒 2.应用服务器查询单据,根据当前时间去查,但是由于数据库服务器要快7秒,导致查询不出数据. 总结 ...

  3. SkylineGlobe 支持火狐和谷歌浏览器的可运行示例代码

    示例代码: <html> <head> <title>3dml的Feature对象选中和隐藏</title> <script type=" ...

  4. 《MySQL必知必会》[06] 触发器

    1.触发器 MySQL中的触发器概念,和Java中的事件监听器有点相似.当你想要某条语句在某个事件发生时自动执行,就要用到触发器了. 触发器能响应如下三类语句: DELETE INSERT UPDAT ...

  5. Python、Lua和Ruby三大语言脚本哪家强？

    这三种语言中的哪一种更合适你的项目?很大程度取决于你想达到什么样的目标.作为一书的结尾,在这一节里,我会描述一下它们各自的优点和不足.   Python的优点和不足 Python的优点如下: 1. P ...

  6. CF1097D Makoto and a Blackboard 积性函数、概率期望、DP

    传送门 比赛秒写完ABC结果不会D--最后C还fst了qwq 首先可以想到一个约数个数\(^2\)乘上\(K\)的暴力DP,但是显然会被卡 在\(10^{15}\)范围内因数最多的数是\(978217 ...

  7. 学习Key与Value的集合hashtable

    你可以创建一个hashtable: 你可以使用foreach方法,把hashtable的key与value循环写出来: 在控制台屏幕输出: 如果只需把key输出: 如果只想把值循环输出: 测试输出结果 ...

  8. mui 下拉刷新和上拉加载

    <body> mui文档提供了两种不同模式的下拉刷新,具体情况看文档,链接:http://dev.dcloud.net.cn/mui/pulldown/ 单 webview 模式和 双 w ...

  9. HDU 1109 Run Away

    题目大意:给一个矩阵的长宽,再给n个点,求矩阵区域内某个点到各个点的最小距离的最大值,输出所求点的坐标 这道题我还是写了随机化乱搞,不过由于比较懒于是就没有写模拟退火,不过也是可以AC的 我们先初始随 ...

  10. Scala学习(三)练习

    Scala数组相关操作&练习 1. 1. 编写一段代码,将a设置为一个包含n个随机整数的数组,要求随机数介于0(包含)和n(不包含)之间 def main (args: Array[Strin ...