React函数调用方式,以及坑
时间:2020-05-09
本文章向大家介绍React函数调用方式,以及坑,主要包括React函数调用方式,以及坑使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
React函数调用方式,以及坑
好吧这篇文章没想到看得人这么多....出乎意料,mark下,改天写篇原理吧,另外下面是去年在鹅厂的写法,后面鹅厂就不能用react了...
急用的看最后两个就好了,其他情况没啥营养的,就是试错
情况一:
constructor(props) {
super(props);
this.login = this.login.bind(this);
}
login(a,b,c) {
console.log(this);//打印这个组件本身
console.log(a);//打印111111
console.log(b);//undefined
console.log(c);//undefined
}
<button onClick={()=>{this.login(111111)}} />
情况二:
constructor(props) {
super(props);
this.login = this.login.bind(this);
}
login(a,b,c) {
console.log(this);//打印这个组件本身
console.log(a);//打印Proxy对象:Proxy里面可以获得dom元素
console.log(b);//打印event
console.log(c);//undefined
}
<button onClick={this.login} />
情况三:
constructor(props) {
super(props);
// this.login = this.login.bind(this);
}
login(a,b,c) {
console.log(this);//打印这个组件本身,说明我们用箭头函数的时候,不需要bind(this),react自动把this指向了组件自己,
console.log(a);//打印出了111111
console.log(b);//undefined
console.log(c);//undefined
}
<button onClick={()=>{this.login(111111)}} />
情况四:
constructor(props) {
super(props);
// this.login = this.login.bind(this);
}
login(a,b,c) {
console.log(this);//打印null,这是react最常见的坑,this本来指向window,但是经过react初始化之后,指向了null;
console.log(a);//打印Proxy对象:Proxy里面可以获得dom元素
console.log(b);//打印event
console.log(c);
}
<button onClick={this.login} />
情况五:
constructor(props) {
super(props);
// this.login = this.login.bind(this);
}
login(a,b,c) {
console.log(this);//打印这个组件本身
console.log(a);//undefined
console.log(b);//undefined
console.log(c);//undefined
}
<button onClick={()=>{this.login()}} />
情况六:(可以算作es5的最佳实践,用的es5的方法,拿到所有参数)
constructor(props) {
super(props);
// this.login = this.login.bind(this);
this.login=(a,b,c)=>{
console.log(this);//打印这个组件本身
console.log(a);//111111
console.log(b);//打印Proxy对象:Proxy里面可以获得dom元素
console.log(c);//打印event:
}
}
<button onClick={this.login.bind(this,111111)} />
最佳实践:(for es6) 老版本
constructor(props) {
super(props);
// this.login = this.login.bind(this);
}
login(type,event,proxy) {
console.log(this);//打印这个组件本身
console.log(event);//打印event:
console.log(proxy);//打印Proxy对象,event详情请查验es6
}
<button onClick={()=>{let target=this, handler={};this.login('boss',event,new Proxy(target, handler))}}/>
最佳实践:2018(需要传参)
constructor(props) {
super(props);
}
login=(num, evt)=>{
console.log(num);//打印传参
console.log(evt);//打印event:
}
<button onChange={this.login.bind(null, 111)}/>
最佳实践:2018(不需要传参)
constructor(props) {
super(props);
}
login=( evt)=>{
console.log(evt);//打印event:
}
<button onChange={this.login}/>
原文地址:https://www.cnblogs.com/onesea/p/12859231.html
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(28)-系统小结
- 用谷歌浏览器来当手机模拟器
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(27)-权限管理系统-分配用户给角色
- ASP.NET MVC5+EF6+EasyUI 后台管理系统-分配角色给用户
- 体验vs11 Beta
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(25)-权限管理系统-系统管理员(附生成器)
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(24)-权限管理系统-将权限授权给角色
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(23)-权限管理系统-角色组模块
- jQuery Gallery Plugin在Asp.Net中使用
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(22)-权限管理系统-模块导航制作
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(20)-权限管理系统-根据权限获取菜单
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(19)-权限管理系统-用户登录
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(21)-权限管理系统-跑通整个系统
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(18)-权限管理系统-表数据
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- grafana-zabbix插件安装和配置zabbix mysql
- grafana使用教程之API key
- Grafana使用教程之安装
- Java基础数据类型之包装类equals和==详解
- SCP不用密码传输文件
- Java 使用Collections.reverse对list集合进行降序排序
- Liquibase异常 mysql数据库 Cannot add foreign key constraint
- Linux获取文件最后修改时间
- Crontab脚本无法正常执行问题
- Python 输入时间字符串以分钟单位计算时间差
- Linux下执行bcp指令
- Python 处理时间差
- Zabbix发送带附件的邮件
- CentOs7下Zabbix安装教程——zabbix agent安装和前端配置
- CentOs7下Zabbix安装教程——zabbix server安装