<!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. day16 Python 内置函数 大体演示想看就看，会用就行

    1.abs() 获取绝对值 a = -10 print(a.__abs__()) 结果: 10 2.all()  接收一个迭代器,如果跌电气的所有元素都为真,那么返回True,否则返回False tm ...

  2. node.js取参四种方法req.body,req.params,req.param,req.body

    参考:https://my.oschina.net/u/2519530/blog/535309 获取请求很中的参数是每个web后台处理的必经之路,nodejs的 express框架 提供了四种方法来实 ...

  3. 解决VC++6.0打开文件或添加文件到工程出错的问题

    相信很多朋友在安装VC++6.0之后,发现无法使用打开文件命令.同时,打开了工程,却无法实现文件添加到工程的问题.一旦进行如此操作,便会出现应用程序错误,需要关闭应用程序.为此,不胜其烦.更有甚者,以 ...

  4. PAT A1141 PAT Ranking of Institutions （25 分）——排序，结构体初始化

    After each PAT, the PAT Center will announce the ranking of institutions based on their students' pe ...

  5. 【Codeforces 464D】World of Darkraft - 2

    Codeforces 464 D 首先我们知道这K个装备是互不干扰的,就是说如果一个装备升级了或者卖掉了,不会对其它装备的挣到的钱产生任何影响.所以我们就考虑单独处理某一个装备挣到的钱. 那么就设\( ...

  6. this computer meets the requirements for HAXM,but intel Virtualization Technology (VT-x) is not turned on

    this computer meets the requirements for HAXM,but intel Virtualization Technology (VT-x) is not turn ...

  7. 16-(基础入门篇)GPRS(Air202)关于多个文件中的变量调用和定时器

    https://www.cnblogs.com/yangfengwu/p/9968405.html 因为自己看到好多问多个文件调用的,感觉这个应该说一说 对了大家有没有知道这个是干什么的 大家有没有看 ...

  8. vba总结用法 及案例图

  9. GitHub Git 简单操作

    一.使用git更新GitHub 准备:本地已经安装好git 登录GitHub,选择好仓库,点击 Clone or download 拷贝地址 这里的地址为:https://github.com/edw ...

  10. Sql 截取字段中的字符串

    取 a 字段里有字符x后面的数 right(a, charindex('x',reverse(a))-1))      reverse(字段) 这个函数是把字段倒过来并转换成nvarchar类型 取 ...