<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>React 实例</title>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">

class Toggle extends React.Component {

  constructor(props) {

    super(props);

    this.state = {isToggleOn: true};

    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用

    this.handleClick = this.handleClick.bind(this);

  }

  handleClick() {

    this.setState(prevState => ({

      isToggleOn: !prevState.isToggleOn

    }));

  }

  render() {

    return (

      <button onClick={this.handleClick}>

        {this.state.isToggleOn ? 'ON' : '999'}

      </button>

    );

  }

}

ReactDOM.render(

  <Toggle />,

  document.getElementById('example')

);

</script>

</body>

</html>

react篇章-事件处理的更多相关文章

  1. react的事件处理为什么要bind this 改变this的指向？

    react的事件处理会丢失this,所以需要绑定,为什么会丢失this? 首先来看摘自官方的一句话: You have to be careful about the meaning of this ...

  2. React之事件处理

    在react中,事件处理的写法和处理方式可能会和vue以及传统html有些不同. 一.事件名和默认行为阻止 事件名采用驼峰写法,并且方法名用大括号引入,而不是双引号: <button onCli ...

  3. react篇章-React Props-Props 验证

    React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库. <script src="https://cdn.bootcss.com/pr ...

  4. react篇章-React Props

    state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...

  5. react篇章-React State(状态)-组件都是真正隔离的

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  6. react篇章-React State(状态)-数据自顶向下流动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  7. react篇章-React State(状态)-将生命周期方法添加到类中

    将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...

  8. react篇章-React State(状态)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. react篇章-React 组件-复合组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

随机推荐

  1. Python json转字符串的一些细节

    要调PHP那边的接口,php那边一直都校验不过,很是郁闷.没办法,只能让人把发送成功的代码拿过来看,不过是php写的,步骤都是一样: php端: 1. json对象转json字符串. 2. 对json ...

  2. Windows系统环境下Solr之Java实战（三）使用solrJ管理索引库

    https://www.cnblogs.com/zhuxiaojie/p/5764680.html https://www.cnblogs.com/xieyupeng/p/9317158.html

  3. 美轮美奂！9款设计独特的jQuery/CSS3全新应用插件（下拉菜单、动画、图表、导航等）

    今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单.jQuery焦点图.jQuery表单.jQuery图片特效等.下面大家一起来看看吧. 1.jQuery水晶样式下拉导 ...

  4. Redis（Remote Dictionary Server）入门

    说说特性 存储结构:键值对支持多种数据类型,包括字符串类型,散列类型,列表类型,集合类型,有序集合类型. 内存存储与持久化:支持将内存中的数据异步写入磁盘中. 丰富的功能:支持为每个键值对设置生存时间 ...

  5. [NOI导刊2010提高&洛谷P1774]最接近神的人 题解（树状数组求逆序对）

    [NOI导刊2010提高&洛谷P1774]最接近神的人 Description 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某 ...

  6. HTML字体的设置

    CSS字体设置 box-sizing:border #content-box   box-shadow:设置盒子边框的阴影.     字体动作:   font-family:设置字体.比如:‘微软雅黑 ...

  7. Css之备忘录~

    1.background-size:contain/cover 两者的作用都是一样,一般用于设置小图标作为背景图,两者的区别是: Contain:不会失真     cover:会失真 2.a标签里面如 ...

  8. VUE项目用hbuilder 打包为手机APP

    一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...

  9. no libsigar-amd64-linux.so in java.library.path 解决方法

    关于sigar的介绍可以参考这边博文 :https://www.cnblogs.com/luoruiyuan/p/5603771.html 在Linux上运行java程序时出现 no libsigar ...

  10. python网络编程-socket发送大数据包问题

    一:什么是socket大数据包发送问题 socket服务器端或者客户端在向对方发送的数据大于对方接受的缓存时,会出现第二次接受还接到上次命令发送的结果.这就出现象第一次接受结果不全,第二次接果出现第一 ...