以下提供三种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内三种函数的写法的更多相关文章

  1. js中的三种函数写法

    js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...

  2. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  3. sql注入 报错注入常用的三种函数

    1.floor()函数 报错原因是 报错的原因是因为rand()函数在查询的时候会执行一次,插入的时候还会执行一次.这就是整个语句报错的关键 前面说过floor(rand(0)*2) 前六位是0110 ...

  4. jsp的三种自定义标签 写法示例

    1.自定义方法标签 引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写 ...

  5. AMD,CMD,UMD 三种模块规范 写法格式

    一下三块均以 foo.js 为示例文件名,以 jQuery,underscore 为需求组件 ADM:异步模块规范, RequireJs 的支持格式 // 文件名: foo.js define(['j ...

  6. egret中三种单利的写法。

    1 普通的单例写法 缺点:每个单例类里都要写instance和getInstance. class Single{ private static instance:Single; public sta ...

  7. android 三种定时器的写法

    //两秒后执行new Handler().postDelayed(new Runnable() { @Override public void run() { --todo }}, 2000); -- ...

  8. Egret中的三种单例写法

    1 普通的单例写法 as3中也是这么个写法. 缺点:每个单例类里都要写instance和getInstance. class Single{ private static instance:Singl ...

  9. axios POST提交数据的三种请求方式写法

    1.Content-Type: application/json import axios from 'axios' let data = {"code":"1234&q ...

随机推荐

  1. Class__Two

    今天老师要求做查找英文文章中最高频的词  文章用文本储存 import java.io.BufferedReader;import java.io.File;import java.io.FileIn ...

  2. GLSL写vertex shader和fragment shader

    0.一般来说vertex shader处理顶点坐标,然后向后传输,经过光栅化之后,传给fragment shader,其负责颜色.纹理.光照等等. 前者处理之后变成裁剪坐标系(三维),光栅化之后一般认 ...

  3. JS中常见原生DOM操作API

    摘自:https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它, ...

  4. iOS项目之报错笔记

    问题一: linker command failed with exit code 1 (use -vto see invocation) 原因:导入了.m的头文件,导致同时有两个一样的.m文件在编译 ...

  5. django模型中的关系对应

    显然,关系数据库的力量在于将表相互关联.Django提供了定义三种最常见的数据库关系类型的方法:多对一,多对多和一对一. 在说明之前,首先来理解一下这三个概念: 多对一: 两个集合a,b;集合a中的多 ...

  6. inst_for_mysql5.7.sh

    #!/bin/bash # Author: wangshenjin<wangshenjin233@foxmail.com> # Description: install percona-s ...

  7. Quick Find (QF)

    Quick Find 顾名思义就是快速查找,构建一个数组,通过下标即可迅速查找其id Union and Find:构建一个数组,下标为索引,数组元素的值为其id,初始id和索引相同 Union(p, ...

  8. shell脚本一键安装nginx

    依赖包安装包放在一起, 直接执行这个脚本就行. #!/bin/bash #--------------------------------------------------------------- ...

  9. html5-表单属性及<!DOCTYPE> 标签

    <!DOCTYPE> 标签定义和用法<!DOCTYPE> 声明必须位于HTML 5 文档中的第一行,也就是位于<html> 标签之前.该标签告知浏览器文档所使用的H ...

  10. opencv学习之路(6)、鼠标截图,滑动条播放视频

    一.鼠标截图 #include<opencv2/opencv.hpp> #include<iostream> using namespace cv; using namespa ...