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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
js单例模式详解实例
Nov 21 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
详解React 元素渲染
Jul 07 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
天津市收音机工业发展史
2021/03/04 无线电
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
浅谈php://filter的妙用
2019/03/05 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
php面向对象重点知识分享
2019/09/27 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
python pdb调试方法分享
2014/01/21 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
安全资金保障制度
2014/01/23 职场文书
党员承诺书怎么写
2014/05/20 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
css3新特性的应用示例分析
2022/03/16 HTML / CSS
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏
Nginx HTTP跳转至HTTPS
2022/05/15 Servers