<!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. 2、JUC--CAS算法

     CAS (Compare-And-Swap) 是一种硬件对并发的支持,针对多处理器操作而设计的处理器中的一种特殊指令,用于管理对共享数据的并发访问. CAS 是一种无锁的非阻塞算法的实现. C ...

  2. node.js如何将远程的文件下载到本地、解压、读取

    其实要解决的问题,很简单,获取远程文件,然后解压到本地读取. 在vscode中通过node.js来实现是比较方便的,相比之前的zip.js,我觉得我还是比较喜欢node.js实现方式. test.js ...

  3. VsCode插件开发之入门示例

    主要参考官网:https://code.visualstudio.com/api/get-started/your-first-extension 其实也就三步 一.安装环境 npm install ...

  4. yum问题解决

    错误信息1:There was a problem importing one of the Python modulesrequired to run yum. The error leading ...

  5. Qt+QGIS二次开发：向shp矢量图层中添加新的字段

    添加一个新的字段到shp文件中,并且从Excel里导入数据到该字段.原shp文件里的字段ID应该与Excel里的字段ID一一对应才能正确的导入.下图分别是shp的字段和Excel的字段 将class字 ...

  6. patch函数的解释2

    patch 创建补片图形对象 句法: patch(X,Y,C) patch(X,Y,Z,C) patch(FV) patch(...'PropertyName',propertyvalue...) p ...

  7. 暂停线程执行sleep_yield_join_stop

    1.final void join() 调用该方法的线程强制执行完成,其它线程处于阻塞状态,该线程执行完毕,其它线程再执行 public class TestJoin { public static ...

  8. linux安装jdk与配置-centos7版本

    1.Linux安裝jdk 1.如果電腦沒有wget命令的,先使用yum安裝wget命令. eg: yum install wget 2.安裝好后就可以直接使用wget命令去下載jdk. 附:打開官網連 ...

  9. 使用自定义端口连接SQL Server的方法（转载）

    使用过SQL Server的人大多都知道,SQL Server服务器默认监听的端口号是1433,但是我今天遇到的问题是我的机器上有三个数据库实例,这样使用TCP/IP远程连接时就产生了问题.如何在Mi ...

  10. 外部Jenkins调用容器中Slave配置实践

    1.Jenkins配置 实现动态生成的Slave节点并调用,解决构建项目出现slave节点任务堵塞或者是slave宕机问题.容器平台采用openshift. 参考配置文档:https://blog.c ...