<!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. （转）web.xml中的contextConfigLocation在spring中的作用

    (转)web.xml中的contextConfigLocation在spring中的作用   一.Spring如何使用多个xml配置文件 1.在web.xml中定义contextConfigLocat ...

  2. mysql对String类型的数字值排序

    一.需求:根据月份分组,然后再根据月份排序 效果图 sql如下: SELECT ) number, date_format(created_at,'%c') date FROM ********* W ...

  3. spring，springmvc，mybatis整合ssm框架出现ORA-02289:序列不存在问题

    今天整合了一个SSM项目,完了后部署到Tomcat服务器,正常启动.但是当我发送请求时,报错,,如下 报错说序列不存在,可是我明明创建了序列呀,然后我测试了一下,测试语句:select tb_user ...

  4. QT QListWidget 简单的操作

    以下是简单的 listWidget 的方法的功能 listWidget = QListWidget() #实例化一个(item base)的列表 listWidget.addItem('dd') #添 ...

  5. Android学习之基础知识四-Activity活动5讲（Activity的生命周期）

    一.返回栈 1.Android是通过任务(Task)来管理活动,一个任务就是一个返回栈内所有活动的集合. 2.返回栈是一个后进先出的数据结构,每启动一个新的活动,该活动就会覆盖原来的活动,位于栈顶位置 ...

  6. android 通讯类资料整理

    https://github.com/koush/AndroidAsync(websocket) https://github.com/loopj/android-async-http http:// ...

  7. jdk和cglib简单理解

    之前使用cglib的时候不需要将classLoader作为参数传入,但动态代理却要,带着这个疑惑进入这个方法: Proxy.newProxyInstance(classLoader, interfac ...

  8. rook 入门理解

    参考:https://my.oschina.net/u/2306127/blog/1830356?from=timeline 1.Rook通过一个操作器(operator)完成后续操作,只需要定义需要 ...

  9. php利用自定义key，对数据加解密的方法

    客户端和服务端通信时,有个场景很常见,通过一个id作为url参数来回传递.假设现在业务上只有这个id标识,那么需要稍微安全一点的通信,对这个id进行加密传输,到服务端再进行解密.这里需要一个服务端进行 ...

  10. java json字符串传递给 js 时 特殊字符转义错误 研究

    一些换行 回车等符号需要转义 主要注意 单引号 与双引号. 一 如果js以 双引号接收字符串 则转单引号 "  至 \" 否则js报错 二 如果js以 单引号接收字符串 则转单引号 ...