1. function ActionLink() {
  2. function handleClick(e) {
  3. e.preventDefault();
  4. console.log('The link was clicked.');
  5. }
  6.  
  7. return (
  8. <a href="#" onClick={handleClick}>
  9. Click me
  10. </a>
  11. );
  12. }

When using React you should generally not need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.

Becareful about 'this':

  1. class Toggle extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = {isToggleOn: true};
  5.  
  6. // This binding is necessary to make `this` work in the callback
  7. this.handleClick = this.handleClick.bind(this);
  8. }
  9.  
  10. handleClick() {
  11. this.setState(prevState => ({
  12. isToggleOn: !prevState.isToggleOn
  13. }));
  14. }
  15.  
  16. render() {
  17. return (
  18. <button onClick={this.handleClick}>
  19. {this.state.isToggleOn ? 'ON' : 'OFF'}
  20. </button>
  21. );
  22. }
  23. }
  24.  
  25. ReactDOM.render(
  26. <Toggle />,
  27. document.getElementById('root')
  28. );

或者可以用下面的方法解决: (利用ES6箭头函数)

  1. class LoggingButton extends React.Component {
  2. // This syntax ensures `this` is bound within handleClick.
  3. // Warning: this is *experimental* syntax.
  4. handleClick = () => {
  5. console.log('this is:', this);
  6. }
  7.  
  8. render() {
  9. return (
  10. <button onClick={this.handleClick}>
  11. Click me
  12. </button>
  13. );
  14. }
  15. }

或者

  1. class LoggingButton extends React.Component {
  2. handleClick() {
  3. console.log('this is:', this);
  4. }
  5.  
  6. render() {
  7. // This syntax ensures `this` is bound within handleClick
  8. return (
  9. <button onClick={(e) => this.handleClick(e)}>
  10. Click me
  11. </button>
  12. );
  13. }
  14. }

以上均来自于react官网docs。

可以在js 中用debugger来断点调试

React事件处理程序的更多相关文章

  1. react事件机制

    1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...

  2. 【React】354- 一文吃透 React 事件机制原理

    大纲 主要分为4大块儿,主要是结合源码对 react事件机制的原理 进行分析,希望可以让你对 react事件机制有更清晰的认识和理解. 当然肯定会存在一些表述不清或者理解不够标准的地方,还请各位大神. ...

  3. KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序

    在大多数情况下,数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型. 然而,事件处理是一个常常会导致详细数据绑定属性的领域,因为匿名函数通常是传递参数的推荐技术. 例如: <a href=& ...

  4. 深入理解DOM事件机制系列第二篇——事件处理程序

    × 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...

  5. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

  6. JS事件-事件处理程序-笔记总结ing...

    html事件处理程序:缺点-行为与结构耦合<input type="button" onclick = "diaoyong();"> dom0级事件 ...

  7. JavaScript事件处理程序

    JavaScript中的事件处理程序主要分为3种: HTML事件处理程序: <script type="text/javascript"> // HTML事件处理程序 ...

  8. JS:事件处理程序

    在JQuery中有个toggle事件,可以绑定两个或多个函数,可以轮流相应click事件,这两天学习到原来javascript中有两个方法(也可以说是四个)同样可以实现这个功能. #box{ marg ...

  9. js 事件处理程序 事件对象

    事件:用户或浏览器自身执行的动作: 事件处理程序:响应某个事件的函数: 事件流:从页面中接收事件的顺序. 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段 ...

随机推荐

  1. Java的HashMap和HashTable

    Java的HashMap和HashTable 1. HashMap 1)  hashmap的数据结构 Hashmap是一个数组和链表的结合体(在数据结构称“链表散列“),如下图示: 当我们往hashm ...

  2. 时屏蔽ios和android下点击元素时出现的阴影

    -webkit-tap-highlight-color -webkit-tap-highlight-color:rgba(255,255,255,0)

  3. 机器学习性能指标精确率、召回率、F1值、ROC、PRC与AUC--周振洋

    机器学习性能指标精确率.召回率.F1值.ROC.PRC与AUC 精确率.召回率.F1.AUC和ROC曲线都是评价模型好坏的指标,那么它们之间有什么不同,又有什么联系呢.下面让我们分别来看一下这几个指标 ...

  4. 使用JDK的keytool生成Android签名证书

    生成证书:keytool -genkey -alias [yourapp] -keyalg RSA -validity 20000 -keystore [yourapp].keystore 输入key ...

  5. 软件工程项目组Z.XML会议记录 2013/09/14

    软件工程项目组Z.XML会议记录 [例会时间]2013年9月14日星期六21:00-22:30 [例会形式]小组讨论 [例会地点]新主楼A1025 [例会主持]李孟 [会议记录]李孟 会议整体流程 一 ...

  6. beta版本冲刺五

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:恺琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  7. MSSSQL 脚本收藏

    通配符 % : 表示0~n个任意字符 ­ _ : 表示单个任意字符 ­ [] :表示在括号里列出的任意字符 ­ [^]:表示任意个没有在括号中列出的字符 ­ 1.创建数据库 2. 创建架构 /**** ...

  8. eclipse版本命名规则与其他软件命名

    文章:Eclipse各版本代号一览表 eclipse使用星球.神话人物.元素名称作为命名代号. 所以思路要放宽,不要拘泥于已有经验. java是用咖啡命名的: python中文意思是蟒蛇: 不拘泥于已 ...

  9. Linux IO乱序

    原创翻译,转载请注明出处. 在一些平台,所谓的内存映射I/O在保序执行这方面是没有保障的.在这些平台,驱动写入器负责保证I/O写操作按照预期的顺序写到设备内存映射地址. 代表性的做法是通过读取一个安全 ...

  10. Win10系统开启IIS服务步骤

    原文链接:http://www.111cn.net/sys/361/93003.htm