react篇章-事件处理
<!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篇章-事件处理的更多相关文章
- react的事件处理为什么要bind this 改变this的指向?
react的事件处理会丢失this,所以需要绑定,为什么会丢失this? 首先来看摘自官方的一句话: You have to be careful about the meaning of this ...
- React之事件处理
在react中,事件处理的写法和处理方式可能会和vue以及传统html有些不同. 一.事件名和默认行为阻止 事件名采用驼峰写法,并且方法名用大括号引入,而不是双引号: <button onCli ...
- react篇章-React Props-Props 验证
React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库. <script src="https://cdn.bootcss.com/pr ...
- react篇章-React Props
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...
- react篇章-React State(状态)-组件都是真正隔离的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-数据自顶向下流动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-将生命周期方法添加到类中
将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...
- react篇章-React State(状态)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React 组件-复合组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
随机推荐
- Linux启动的流程
2017年1月10日, 星期二 Linux启动的流程 null
- 为什么JavaScript声明变量的时候鼓励加var关键字
在JavaScript中,var用来声明变量,但是这个语法并不严格要求,很多时修改,我们可以直接使用一个变量而不用var声明它. var x = "XX"; y ="xx ...
- bzoj 3790 神奇项链(Manacher,DP+BIT | 贪心)
[题意] 你可以产生一个回文串,也可以将两个串合并成一个串,问产生目标串需要的最少合并次数. [思路] 显然我们要先产生目标串中包含的极大回文字符串. Manacher求出每个位置可以向两边延伸的最长 ...
- beta版1.1.2
此次的beta版本做的修改重点在内部的算法上面. 因为之前所做的判断不重复的随机数方面采用的是String.valueof()的方式,即将int类型数字转换成string类型,比较string中是否出 ...
- 【leetcode 简单】 第一百零七题 回旋镖的数量
给定平面上 n 对不同的点,“回旋镖” 是由点表示的元组 (i, j, k) ,其中 i 和 j 之间的距离和 i 和 k 之间的距离相等(需要考虑元组的顺序). 找到所有回旋镖的数量.你可以假设 n ...
- apache服务器yii2报The fileinfo PHP extension is not installed解决思路
这个问题整整困扰了我两天,今天终于搞定了.记录一下. 背景是这样的,我呢,在centos服务器上安装了lamp环境,其中php是5.3.3,在用composer安装yii2的时候,出现了某些yii2插 ...
- 常见踩坑案例(二)-Request method 'POST' not supported
一 前言 最近涉及到与前后端的数据对接,按道理来说没一点压力结果被一前端童鞋带坑里去了(不过也是很久没写过这种前后端分离进行联调的事情了,如果是一个人全套弄的话就不会出现下面问题). 二 Reques ...
- Python raw_input和input总结 在版本2和版本3中的区别
Python 2.3.4 (#1, Feb 2 2005, 11:44:13) [GCC 3.4.3 20041212 (Red Hat 3.4.3-9.EL4)] on linux2 Type &q ...
- python几种装饰器的用法
用函数装饰函数 这种比较常见首先定义装饰器函数 def cache(func): data = {} @wraps(func) def wrapper(*args, **kwargs): key = ...
- 好用的工具---screen命令
问 题场景:要在服务器上配置环境,但是我的电脑无法直接连到服务器上,通常要经过好几次ssh跳转.配环境需要设置好几个用户,这自然需要同时打开好几个连 接服务器的终端窗口,每个连接到服务器的终端窗口都要 ...