<!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. beta版1.1.2

    此次的beta版本做的修改重点在内部的算法上面. 因为之前所做的判断不重复的随机数方面采用的是String.valueof()的方式,即将int类型数字转换成string类型,比较string中是否出 ...

  2. laravel 和 thinkphp 条件查询的区别

    laravel:以二维数组形式where查询,可以为空,即,该条where不运行: thinkphp:以字符串形式查询,不能为空.

  3. C语言入门教程-(1)简介及搭建环境

    1.谁适合阅读本教程 本教程可以帮助大家从零开始学习C语言,对于有一定基础的人起到夯实基本功的作用.C语言容易学习,非常适合初学者入门,而且也为以后的编程打下基础.借用一句话:“要进入编程行业高手必学 ...

  4. HDU 1160 FatMouse's Speed (最长上升子序列)

    题目链接 题意:n个老鼠有各自的重量和速度,要求输出最长的重量依次严格递增,速度依次严格递减的序列,n最多1000,重量速度1-10000. 题解:按照重量递增排序,找出最长的速度下降子序列,记录序列 ...

  5. SearchSploit

    在我们的GitHub上的Exploit Database存储库中包含一个名为"searchsploit"的Exploit-DB的命令行搜索工具,该工具还允许您在任何地方随身携带一个 ...

  6. UNIX网络编程 第1章：简介和TCP/IP

    1.1 按1.9节未尾的步骤找出你自己的网络拓扑的信息. 1.2 获取本书示例的源代码(见前言),编译并测试图1-5所示的TCP时间获取客户程序.运行这个程序若干次,每次以不同IP地址作为命令行参数. ...

  7. [转]CMake快速入门教程：实战

    转自http://blog.csdn.net/ljt20061908/article/details/11736713 0. 前言    一个多月前,由于工程项目的需要,匆匆的学习了一下cmake的使 ...

  8. Struts2笔记1:--Struts2原理、优点、编程流程、6大配置文件以及核心配置文件struts.xml

    Struts2原理(底层使用的是Servlet的doFilter方法): Struts2优点: 第一个Struts程序: 在开发Struts程序之前,首先要导入额外的jar包,基本需求的是14个jar ...

  9. 利用JS验证查询参数-选择月份后必须选择年份

    js代码: function queryAgentInfo(){ // 标记 var flag=false; //遍历所有月份 $(".month").each(function( ...

  10. java使用DOM操作XML

    XML DOM简介 XML DOM 是用于获取.更改.添加或删除 XML 元素的标准. XML 文档中的每个成分都是一个节点. DOM 是这样规定的: 整个文档是一个文档节点 每个 XML 标签是一个 ...