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 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
Angular 数据请求的实现方法
May 07 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 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 class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
php网站地图生成类示例
2014/01/13 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
浅谈php://filter的妙用
2019/03/05 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
python异步任务队列示例
2014/04/01 Python
Python动态加载模块的3种方法
2014/11/22 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
final, finally, finalize的区别
2012/03/01 面试题
国际贸易个人求职信范文
2014/01/04 职场文书
九年级体育教学反思
2014/01/23 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
大学生个人求职信例文
2014/07/07 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
销售经理工作检讨书
2015/02/19 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
Python图片验证码降噪和8邻域降噪
2021/08/30 Python