<!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. 针对TCP连接异常断开的分析

    我们知道,一个基于TCP/IP的客户端-服务器的程序中,正常情况下,我会是启动服务器使其在一个端口上监听请求,等待客户端的连接:通过TCP的三次握手,客户端能够通过socket建立一个到服务器的连接: ...

  2. 一道非常易错的js面试题

    题目如下: function Foo() { getName = function() { alert(1); }; return this; } Foo.getName = function() { ...

  3. Spring Aop、拦截器、过滤器的区别

    Filter过滤器:拦截web访问url地址.Interceptor拦截器:拦截以 .action结尾的url,拦截Action的访问.Spring AOP拦截器:只能拦截Spring管理Bean的访 ...

  4. R的农场 chebnear

    评测传送门 Description最近,R 终于获得了一片他梦寐以求的农场,但如此大的一片农场,想要做好防卫工作可不是一件容易的事.所以 R 购买了 N 个守卫,分别让他们站在一定的位置上(守卫不可移 ...

  5. Strusts2笔记5--数据验证

    数据验证: 输入验证分为客户端验证与服务器端验证.客户端验证主要通过JavaScript脚本进行,而服务器端验证主要是通过Java代码进行验证. 分为以下四种情况: (1)手工编写代码,对Action ...

  6. Indepence Mode 备份 weblogic

    一般不在administation server 停止这个模式 管理服务器挂了,不会影响其他服务器的运行 备份一个domain copy  一个  /bin  把启动的脚本做一个修改  里面的doma ...

  7. wamp中mysql安装时能启动，重启后无法启动的解决办法

    第一次安装wamp之后,所有服务可以正常使用,但是重启之后wamp的图标就变成黄色的了,重装了也这样 查看一下错误日志: 日志显示的错误是这样的: 日志提示可能是3306端口被占用的错误,那来看一下是 ...

  8. C# WebClient、 jsonp实现跨域

    WebClient 无传输数据获取 Uri uri = new Uri(allURL); WebClient wc = new WebClient(); wc.Encoding = System.Te ...

  9. MFC将二进制文件导入资源后释放

    1.前言 前一篇笔记记录了怎么修改PE,此篇记录下如何利用自身的资源文件. 2.编程思路 获得资源句柄 - 获得资源文件大小 - 加载资源文件 - 锁定资源并获得其指针. 3.实践代码 1)编译以下代 ...

  10. C++面试常见问题

    转载:https://zhuanlan.zhihu.com/p/34016871?utm_source=qq&utm_medium=social 1.在C++ 程序中调用被C 编译器编译后的函 ...