前言

Reactjs中事件处理,与DOM元素处理类似,但也有一些不同的语法。

  1. React 事件名称使用驼峰命名,而不是全小写命名。
  2. 使用JSX,可以将函数作为事件处理程序传递,而不是字符串。

es6的class语法规定,类的方法内部,如果含有this,它默认指向类的实例。但是,单独使用该方法,可能报错,this指向不明确。

为了解决这个问题,react提出了3中解决方法。

1. 在回调函数中使用箭头函数

在onClick的时候,使用箭头函数。这个语法确保this 绑定在handleClick中。

优势:很容易让人看懂。

缺点:

在每次render时候,都会产生一个匿名函数。如果此组件作为一个子组件,那么父组件render的时候,子组件也可能会重新渲染,消耗性能。

在线预览

class ToggleBtn extends React.Component {
constructor() {
super()
this.state = {
isToggleOn: true
}
}
handleClick(e) {
this.setState({
isToggleOn: !this.state.isToggleOn
})
}
render() {
return (
<div>
<button onClick={(e) => this.handleClick(e)}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
</div>
)
}
}

2. 在构造器中绑定this

优势:通用。

缺点:繁琐,每次都得手动绑定this。

在线预览

class ToggleBtn extends React.Component {
constructor() {
super()
this.state = {
isToggleOn: true
}
// 这个bind方法是必须的,以确保`this`可以在回调函数handleClick中使用
this.handleClick = this.handleClick.bind(this)
}
handleClick(e) {
this.setState({
isToggleOn: !this.state.isToggleOn
})
}
render() {
return (
<div>
<button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
</div>
)
}
}

3. 使用类字段语法

优点:简单方便。

缺点:

ES7功能。实验性属性,可能不兼容,需要babel处理。

在线预览

class ToggleBtn extends React.Component {
constructor() {
super()
this.state = {
isToggleOn: true
}
}
// 这个语法确保`this` 绑定在handleClick中
handleClick = (e) => {
this.setState({
isToggleOn: !this.state.isToggleOn
})
}
render() {
return (
<div>
<button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
</div>
)
}
}

事件参数的传递。

使用箭头函数和方法原型属性的bind方法,两种方式传递参数的写法。

  1. 使用e代表React event,
  2. 在箭头函数中,默认是作为第二个参数的。
  3. 在bind方法时候,是自动作为它的参数可以使用的。
<button onClick={(e) => this.deleteRow(id, e) }>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

总结

这几种方式,与类中this的绑定问题,解决方式类似。

尽量使用方法2和方法3。方法1如果将事件传递给子组件,可能会有重新渲染的耗能问题。

Reactjs事件处理的三种写法的更多相关文章

  1. 链接属性rel=’external’、rel=’nofollow’、rel=’external nofollow’三种写法的区别

    链接属性rel='external'.rel='nofollow'.rel='external nofollow'三种写法的区别   大家应该都知道rel='nofllow'的作用,它是告诉搜索引擎, ...

  2. jquery 在页面中三种写法

    jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样做的目的是为了兼容移动端开发.由于减少了一些代码,使得该版本比 jQuery 1.x ...

  3. 总结 React 组件的三种写法 及最佳实践 [涨经验]

    React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...

  4. insert into 语句的三种写法

    insert into 语句的三种写法 方式1. INSERT INTO t1(field1,field2) VALUES (v001,v002);            // 明确只插入一条Valu ...

  5. HTML颜色的三种写法

    颜色的三种写法: 1.16进制代码     #000000 2.英文字母         red 3.rgba                rgba(0-255,0,0,0-1) 例如: <b ...

  6. (转)Ext.Button点击事件的三种写法

    转自:http://maidini.blog.163.com/blog/static/377627042008111061844345/ ExtJs的写法太灵活了,现在收集了关于Button点击事件的 ...

  7. setInterval()的三种写法

    前言: setInterval("fun()",time)有两个参数:fun()为要执行的函数:time为多久执行一次函数,单位是毫秒: 我们做一个简单的例子,就是每隔5s弹出一个 ...

  8. 16_点击事件第三种写法_activity实现接口

    第一种写法是有名内部类,第二种写法是匿名内部类,第三种写法是MainActivity实现接口OnClickListener.直接让MainActivity实现了OnClickListener这个接口. ...

  9. jQuery的三种写法

    jQuery的三种写法 jQuery一共有三种写法,写法如下: <script type="text/javascript" src="js/jquery-1.9. ...

随机推荐

  1. [bzoj3714] [PA2014] Kuglarz(最小生成树)

    我们考虑这个题...思路比较神仙. 就是我们设\(sum[i]\)为前i个的区间里的情况,然后我们知道\(sum[j]\)的话,我们就可以知道\(j-i\)的情况了 所以说这很像最小生成树里面的约束条 ...

  2. lua之base64加密和解密算法。

    local function encodeBase64(source_str) local b64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop ...

  3. “全栈2019”Java第八十章:外部类是否能实现本类中的接口?

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  4. 洛谷P4337 [ZJOI2018]线图(状压+搜索+乱搞)

    题面 传送门 题解 妈呀调了我整整一天-- 题解太长了不写了可以去看\(shadowice\)巨巨的 //minamoto #include<bits/stdc++.h> #define ...

  5. mysql索引的应用场景以及如何使用

    唯一的是什么? 1. 索引列(字段)的所有值都只能出现一次,即必须唯一 ---------------------------------------------------------------- ...

  6. [AIR] 使用操作系统默认应用程序打开文件

    AIR 2.0及以上提供了非常简单易用的API让你使用操作系统所定义的关联应用程序打开文件. 这使得使用AIR开发基于“文件管理器”的应用称为可能 用法如下: var file:File = File ...

  7. [ActionScript 3.0] 实现放大镜效果的简单方法

    //mc和bgmc是同一对象的不同实例 //mc放大的对象 //bgmc源对象 //mag放大镜 var scale:Number = 1.3;//放大倍数 mc.mask = mag; mag.st ...

  8. FPGA基础学习(6) -- 原语

    目录 1. IBUF和IBUFDS(IO) 2. IDDR(Input/Output Functions) 3. IBUFG和IBUFGDS(IO) 原语,即primitive.不同的厂商,原语不同: ...

  9. mocha测试框架

    中文翻译文档:https://www.jianshu.com/p/9c78548caffa 阮一峰:http://www.ruanyifeng.com/blog/2015/12/a-mocha-tut ...

  10. requests库的使用

     requests库的使用 pip快速安装 pip install requests 请求方法 每一个请求方法都有一个对应的API,比如GET请求就可以使用get()方法: import reques ...