Reactjs事件处理的三种写法
前言
Reactjs中事件处理,与DOM元素处理类似,但也有一些不同的语法。
- React 事件名称使用驼峰命名,而不是全小写命名。
- 使用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方法,两种方式传递参数的写法。
- 使用e代表React event,
- 在箭头函数中,默认是作为第二个参数的。
- 在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事件处理的三种写法的更多相关文章
- 链接属性rel=’external’、rel=’nofollow’、rel=’external nofollow’三种写法的区别
链接属性rel='external'.rel='nofollow'.rel='external nofollow'三种写法的区别 大家应该都知道rel='nofllow'的作用,它是告诉搜索引擎, ...
- jquery 在页面中三种写法
jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样做的目的是为了兼容移动端开发.由于减少了一些代码,使得该版本比 jQuery 1.x ...
- 总结 React 组件的三种写法 及最佳实践 [涨经验]
React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...
- insert into 语句的三种写法
insert into 语句的三种写法 方式1. INSERT INTO t1(field1,field2) VALUES (v001,v002); // 明确只插入一条Valu ...
- HTML颜色的三种写法
颜色的三种写法: 1.16进制代码 #000000 2.英文字母 red 3.rgba rgba(0-255,0,0,0-1) 例如: <b ...
- (转)Ext.Button点击事件的三种写法
转自:http://maidini.blog.163.com/blog/static/377627042008111061844345/ ExtJs的写法太灵活了,现在收集了关于Button点击事件的 ...
- setInterval()的三种写法
前言: setInterval("fun()",time)有两个参数:fun()为要执行的函数:time为多久执行一次函数,单位是毫秒: 我们做一个简单的例子,就是每隔5s弹出一个 ...
- 16_点击事件第三种写法_activity实现接口
第一种写法是有名内部类,第二种写法是匿名内部类,第三种写法是MainActivity实现接口OnClickListener.直接让MainActivity实现了OnClickListener这个接口. ...
- jQuery的三种写法
jQuery的三种写法 jQuery一共有三种写法,写法如下: <script type="text/javascript" src="js/jquery-1.9. ...
随机推荐
- eclipse installer 安装的新版本 eclipse 导入旧版本 eclipse 插件
打开旧版本eclipse,选择File -> Export... -> Install -> Installed Software Items to File,点击Next 点击Se ...
- “全栈2019”Java第六十章:如何定义接口
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- kali linux之Backdoor-factory
Backdoor-------python编写 适用于windows PE x32/x64 和Linux ELF x32/x64(OSX),支持msf payload 自定义payload 将shel ...
- 关于logstash-out-mongodb插件说明
从kafka获取数据,存到mongodb中.适合空间查询geo_point设置.配置文件如下: input { kafka { type => "test" a ...
- JavaScript中setInterval的用法总结
setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时间显示. setInterval动作的语法格式如下:setInterva ...
- html中的块与布局
一.div a.会跳行 b.如果想不跳行则设置 style =“display:inline” ,允许它的前后存在其它的内联元素同行显示. c.或者设置为浮动元素,float:left 允许它的右边存 ...
- 除了ROS, 机器人定位导航还有其他方案吗?
利用ROS进行机器人开发,我想大多数企业是想借助ROS实现机器人的导航.定位与路径规划,它的出现大大降低了机器人领域的开发门槛,开发者无需向前人一样走众多弯路,掌握多种知识才能开始实现机器人设计的梦想 ...
- mysql5.1解压版安装
1.如果已经安装别的版本先卸载干净,cmd管理员权限登录,mysql\bin目录:mysqld -remove 2.环境变量 MYSQL:path 3.my.ini [mysqld]port=3306 ...
- centos的用户的基本操作
:一:查看当前系统中的用户账号 grep bash /etc/passwd 二:利用root用户(超级管理员给普通用户修改密码)-------- root用户可以修改其他所有人的密码,且不需要验证 ...
- 高阶篇:4.2.3)DFMEA现有设计:预防控制与探测控制
本章目的:在现有设计中,明确预防控制与探测控制的定义和手段. 1.现有控制的填写部位: 2.现行设计控制(h)定义: 作为设计过程的一部分,现行设计控制是已经实施或承诺的活动,它将确保设计充分考虑设计 ...