React学习笔记之事件处理(二)


Posted in Javascript onJuly 02, 2017

之前已经给大家介绍了React中的条件渲染(传送门),本文将给大家关于React中事件处理的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

React的事件处理和DOM的事件处理是很相似的,只是有一些语法上的区别:

  • React的事件名是驼峰的,不是小写的
  • 在JSX语法中,你传递一个fucntion作为时间处理器,而不是一个string

举个例子:

<button onClick={activateLasers}> 
 Activate Lasers
</button>

而且如果你想拿到事件对象event,这个对象是React按照w3c标准完成的,所以不用担心浏览器的兼容性,可以像如下这样:

function ActionLink() { 
 function handleClick(e) {
 e.preventDefault();
 console.log('The link was clicked.');
 }

 return (
 <a href="#" rel="external nofollow" onClick={handleClick}>
  Click me
 </a>
 );
}

如果用ES6的class写法可以像如下一样:

class Toggle extends React.Component { 
 constructor(props) {
 super(props);
 this.state = {isToggleOn: true};

 // 这个`this`绑定是有必要的,用来让this可以在回调中被正确指向React组件的实例对象
 this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
 this.setState(prevState => ({
  isToggleOn: !prevState.isToggleOn
 }));
 }

 render() {
 return (
  <button onClick={this.handleClick}>
  {this.state.isToggleOn ? 'ON' : 'OFF'}
  </button>
 );
 }
}

ReactDOM.render( 
 <Toggle />,
 document.getElementById('root')
);

还有两种方式可以避免写显式bind(this) ,但是都不推荐这么用啊~所以就不再赘述~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
React学习笔记之条件渲染(一)
Jul 02 #Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 #Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 #Javascript
关于使用axios的一些心得技巧分享
Jul 02 #Javascript
React服务端渲染(总结)
Jul 01 #Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 #Javascript
详解node-ccap模块生成captcha验证码
Jul 01 #Javascript
You might like
PHP高级OOP技术演示
2009/08/27 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
php模板引擎技术简单实现
2016/03/15 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
js 目录列举函数
2008/11/06 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python 循环数据赋值实例
2019/12/02 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
Python实现一个论文下载器的过程
2021/01/18 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
小小商店教学反思
2014/04/27 职场文书
上海世博会口号
2014/06/19 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
Python实现双向链表基本操作
2022/05/25 Python