<!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. 苏宁OLAP架构设计

    一. 功能综述 OLAP引擎为存储和计算二合一的引擎,自身内部涵盖了对数据的管理以及提供查询能力.底层数据完全规划在引擎内部,外部系统不允许直接操作底层数据,而是需要通过暴露出来的接口来读写引擎内部数 ...

  2. HTML中添加<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    https://www.cnblogs.com/nxl0908/p/7245837.html Edge模式告诉IE以最高级 模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级标准模式渲染,避免 ...

  3. javascript 写了个字符串组合的情况

    function log() { var i = 0, str = '', args = [].slice.call(arguments); j++; if (isRepeat(args)) { k+ ...

  4. 20155231 2016-2017-2 《Java程序设计》第7周学习总结

    20155231 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 学习目标 了解Lambda语法 了解方法引用 了解Fucntional与Stream API ...

  5. addclass,removeclass

    定义和用法 addClass() 方法向被选元素添加一个或多个类. 该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性. 提示:如需添加多个类,请使用空格分隔类名. rem ...

  6. Linux服务-nginx+nfs实现共享存储

    任务目标:一台服务器进行更改,其他两台服务器访问均同步 现在的情况是: web1.html文件访问的结果是web1 现在我在Web1这台机器上更改web1.html,内容为change in web1 ...

  7. APScheduler API -- apscheduler.schedulers.base

    apscheduler.schedulers.base API class apscheduler.schedulers.base.BaseScheduler(gconfig={}, **option ...

  8. unity 优秀开源项目

    ihaiu.GUIDRef (查看项目资源使用情况) http://blog.ihaiu.com/unity-GUIDRef Ihaiu.PoolManager (对象池) http://github ...

  9. 安装virtualenv（Scrapy）

    Windows 10家庭中文版,Python 3.6.4, virtualenv用来提供一个应用程序独立的 运行环境,这个独立是相对于系统的Python运行环境而言,开发者可以在virtualenv建 ...

  10. Java Http接口加签、验签操作方法

    1.业务背景 最近接触了一些电商业务,发现在处理电商业务接口时,比如淘宝.支付类接口,接口双方为了确保数据参数在传输过程中未经过篡改,都需要对接口数据进行加签,然后在接口服务器端对接口参数进行验签,确 ...