<!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. Java入门系列（四）内部类

    为什么需要内部类? 真正的原因是这样的,java中的内部类和接口加在一起,可以的解决常被C++程序员抱怨java中存在的一个问题没有多继承.实际上,C++的多继承设计起来很复杂,而java通过内部类加 ...

  2. Intellij IDEA 2017 控制台打印换行

    Intellij IDEA 2017 控制台打印的内容超过屏幕宽度了,请问怎么自动换行? 记得重启idea

  3. 微服务深入浅出（6）-- 熔断器Hystrix

    概念 在分布式系统中,一种不可避免的情况就是某些服务会出现故障,导致依赖他们的其他服务出现远程调度的线程问题(雪崩效应).而Hystrix提供的熔断器,通过隔离服务的访问点,能阻止这种分布式系统中出现 ...

  4. 【leetcode 简单】 第八十三题 反转字符串中的元音字母

    编写一个函数,以字符串作为输入,反转该字符串中的元音字母. 示例 1: 输入: "hello" 输出: "holle" 示例 2: 输入: "leet ...

  5. Dream------Hadoop--FSDataInputStream和FSDataOutputStream

    一.FSDataInputStream    FileSystem中的open()方法实际上返回的是一个FSDataInputStream,而不是标准的java.io类.这个类是java.io.Dat ...

  6. rsync本地及远程复制备份【原创】

    1.安装rsyncyum instsall rsync 2.本地复制 rsync -auq --progress --delete /tongbu1/ /tongbu2/ rsync -auq --p ...

  7. 002_安装第三方APP好的站点及解除安全与隐私限制

    一.解除安全与隐私限制的任何来源. http://bbs.feng.com/read-htm-tid-10714286.html 接下来,我们就打开终端,然后输入以下命令:   sudo spctl ...

  8. 五、springboot单元测试

    1.为什么要写测试用例 1. 可以避免测试点的遗漏,为了更好的进行测试,可以提高测试效率 2. 可以自动测试,可以在项目打包前进行测试校验 3. 可以及时发现因为修改代码导致新的问题的出现,并及时解决 ...

  9. css-概述和选择器

    一:CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与 ...

  10. java基础24 线程、多线程及线程的生命周期(Thread)

    1.1.进程 正在执行的程序称作为一个进程.进程负责了内存空间的划分 疑问1:windows电脑称之为多任务的操作系统,那么Windows是同时运行多个应用程序呢? 从宏观的角度:windows确实在 ...