React内三种函数的写法
以下提供三种React内函数的写法,都可以正常运行,有疑问可以留言
写法一:让函数内部的this指向这个类的实例,它是用bind实现的,bind的第一个参数表示context,就是this。
//写法一
class ManageAddress extends React.Component { constructor(props) {
super(props);
this.handleChangeAddressType = this.handleChangeAddressType.bind(this)
...
} /**
* 切换地址类型,重新获取地址列表
* @param key
*/
handleChangeAddressType(key) {
...
}; render() {
return (
...
<button onClick={this.handleChangeAddressType}>测试
</button >
...
)
}
}
写法二:相当于让handleChangeAddressType的值为一个箭头函数,所以调用处直接传入这个值就可以,注意不能加括号会报错。而箭头函数的特性我们都知道:它不会自己创建this,它会从自己的作用域链上层继承this,这里this就会指向这个类的实例。这不是js标准写法,但是babel已经支持了。
//写法二
class ManageAddress extends React.Component { constructor(props) {
super(props);
...
} /**
* 切换地址类型,重新获取地址列表
* @param key
*/
handleChangeAddressType = (key) =>{
...
}; render() {
return (
...
<button onClick={this.handleChangeAddressType}>测试
</button >
...
)
}
}
写法三:在调用处使用箭头函数,与第二种方法类似
//写法三
class ManageAddress extends React.Component { constructor(props) {
super(props);
...
} /**
* 切换地址类型,重新获取地址列表
* @param key
*/
handleChangeAddressType(key) {
...
}; render() {
return (
...
<button onClick={(key)=>this.handleChangeAddressType(key)}>测试
</button >
...
)
}
}
React内三种函数的写法的更多相关文章
- js中的三种函数写法
js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- sql注入 报错注入常用的三种函数
1.floor()函数 报错原因是 报错的原因是因为rand()函数在查询的时候会执行一次,插入的时候还会执行一次.这就是整个语句报错的关键 前面说过floor(rand(0)*2) 前六位是0110 ...
- jsp的三种自定义标签 写法示例
1.自定义方法标签 引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写 ...
- AMD,CMD,UMD 三种模块规范 写法格式
一下三块均以 foo.js 为示例文件名,以 jQuery,underscore 为需求组件 ADM:异步模块规范, RequireJs 的支持格式 // 文件名: foo.js define(['j ...
- egret中三种单利的写法。
1 普通的单例写法 缺点:每个单例类里都要写instance和getInstance. class Single{ private static instance:Single; public sta ...
- android 三种定时器的写法
//两秒后执行new Handler().postDelayed(new Runnable() { @Override public void run() { --todo }}, 2000); -- ...
- Egret中的三种单例写法
1 普通的单例写法 as3中也是这么个写法. 缺点:每个单例类里都要写instance和getInstance. class Single{ private static instance:Singl ...
- axios POST提交数据的三种请求方式写法
1.Content-Type: application/json import axios from 'axios' let data = {"code":"1234&q ...
随机推荐
- Class__Two
今天老师要求做查找英文文章中最高频的词 文章用文本储存 import java.io.BufferedReader;import java.io.File;import java.io.FileIn ...
- GLSL写vertex shader和fragment shader
0.一般来说vertex shader处理顶点坐标,然后向后传输,经过光栅化之后,传给fragment shader,其负责颜色.纹理.光照等等. 前者处理之后变成裁剪坐标系(三维),光栅化之后一般认 ...
- JS中常见原生DOM操作API
摘自:https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它, ...
- iOS项目之报错笔记
问题一: linker command failed with exit code 1 (use -vto see invocation) 原因:导入了.m的头文件,导致同时有两个一样的.m文件在编译 ...
- django模型中的关系对应
显然,关系数据库的力量在于将表相互关联.Django提供了定义三种最常见的数据库关系类型的方法:多对一,多对多和一对一. 在说明之前,首先来理解一下这三个概念: 多对一: 两个集合a,b;集合a中的多 ...
- inst_for_mysql5.7.sh
#!/bin/bash # Author: wangshenjin<wangshenjin233@foxmail.com> # Description: install percona-s ...
- Quick Find (QF)
Quick Find 顾名思义就是快速查找,构建一个数组,通过下标即可迅速查找其id Union and Find:构建一个数组,下标为索引,数组元素的值为其id,初始id和索引相同 Union(p, ...
- shell脚本一键安装nginx
依赖包安装包放在一起, 直接执行这个脚本就行. #!/bin/bash #--------------------------------------------------------------- ...
- html5-表单属性及<!DOCTYPE> 标签
<!DOCTYPE> 标签定义和用法<!DOCTYPE> 声明必须位于HTML 5 文档中的第一行,也就是位于<html> 标签之前.该标签告知浏览器文档所使用的H ...
- opencv学习之路(6)、鼠标截图,滑动条播放视频
一.鼠标截图 #include<opencv2/opencv.hpp> #include<iostream> using namespace cv; using namespa ...