props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的:
1、react事件采用驼峰命名法,而不是纯小写。
驼峰命名法(camelCase):命名的全部全称, 首个单词全部小写后面每个单词的首字母大写。
eg: getElementById onClick
2、使用JSX语法的时候需要传入一个函数作为事件处理函数, 而不是一个字符串
了解基本的以后 , 下面我们利用九个例子来进行事件的巩固:
1、普通匿名函数的直接绑定
按钮1
给onClick后面直接绑定函数,点击以后,就会执行函数里面的内容。
2、使用箭头函数代替匿名的绑定
={()=>{
alert("点击触发匿名函数");
}}>按钮2
3、箭头函数中获取事件源(等同于原生的event对象)
={(e)=>{
e.target.style.color="red";
}}>点击以后按钮就会变成红色
e就是默认的事件参数 e中的target表示事件发生的目标元素 点击以后按钮就会变成红色
4、将匿名函数分离封装
={
this.show}>点击调用外面的函数
点击按钮以后 触发外面声明的show方法 show方法定义如下
constructor(props){
super(props);
this.state={
num:10
}
}
show(){
alert("按钮4被点击 但是里面this会脱离上下文关系");
alert(this.state.num);//报错 this是undefined }
可以弹框提示 , 但是会有this指向的问题 , 接下来 我们看第五步的加强
5、利用箭头函数 对this指向进行加强 改写的代码如下
={
this.show//参数问题就看第六点}>调用函数
点击以后num就能得到改变
6、再来研究箭头函数中参数的问题 如果调用的时候带走参数
={//show6能带参数
()=>{
this.show6("我是参数")
}
}>调用带有参数的函数
方法定义的如下 show6为一个箭头函数, content就是形参 ,接受的值为我是参数
show6=(content)=>{
alert(content);
}
7、事件函数触发是带参数和事件源
={//show7能带参数 还能带事件源
(e)=>{
this.show7("7777",e);
}
}>带走参数和事件源
show7中第二个参数e需要特别处理, 在(e)中声明 才能带出去, 不然e会是没有定义。
方法的定义部分
show7=(content,e)=>{
e.target.innerHTML= content;
}
content就是参数"7777" ,e就是事件源, 通过事件源可以找到目标元素, 然后更新里面的内容
8、不使用箭头函数 使用bind加强(bind里面的第一个参数 表示bind前面函数声明里面this的指向)
={this.show8.bind(this)}>bind加强
方法定义的地方
show8(){
alert("bind绑定");
}
9、改写bind 贴近官方推荐写法
={this.show9} >bind写法
在show9定义中
constructor(props){
super(props);
this.state={
num:10
}
this.show9 = this.show9.bind(this);//bind的提升 调用的写法和8就不一样了 }
show9(){
alert(this.state.num);
}
总结:
react中事件的使用和原生的事件使用极其相似,我们需要解决,函数函数的声明和参数的传递 使用,根据自己的实际情况,合理使用就可以了,不管是箭头函数和普通函数,实际都是殊途同归。
props写法_好程序员web前端培训React中事件的写法总结相关推荐
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记(三)
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
- 正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测 字符串 是否符合 &q ...
- JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
- advanced installer更换程序id_好程序员web前端培训分享kbone高级-事件系统
好程序员web前端培训分享kbone高级-事件系统:1.用法,对于多页面的应用,在 Web 端可以直接通过 a 标签或者 location 对象进行跳转,但是在小程序中则行不通:同时 Web 端的页面 ...
- 好程序员web前端培训分享做H5页面需要学什么
好程序员web前端培训分享做H5页面需要学什么,很多人问过我这个问题,而问这个问题的人基本上都是刚听说过h5,处在懵懂的阶段,他们往往会被一些网上炫酷页面所吸引,开始的目的也很简单,能通过自己的努力做 ...
- html强制不换行 隐藏,好程序员web前端培训分享HTML元素强制不换行
原标题:好程序员web前端培训分享HTML元素强制不换行 好程序员web前端培训分享HTML元素强制不换行,HTML 中 nowrap是用来强制不换行的 在排版中 对包裹plain text的标签使用 ...
- window 程序报错 自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
- vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...
- 前后端解析_好程序员Web前端教程分享前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来的好程 ...
最新文章
- excel如果包含某个字就显示_Excel公式基础知识
- oracle中触发器的讲解
- 百度智能云发布时空数据管理平台,打造一体化数据中台
- android关于控件中setTag(key,Object)的设置的相关问题
- bzoj3252攻略(线段树+dfs序)或者(树链剖分+dfs)
- scala 多线程_Scala中的多线程
- 使用函数处理数组 高阶函数 js
- 系统学习机器学习之神经网络(十一) --TDNN
- 九度 1188 约瑟夫环问题
- nginx-反向代理笔记
- CF621E Wet Shark and Blocks
- 禅道类似软件_整理几款开源项目管理软件
- petalinux 2020.2 安装教程,基于ubuntu20.04.LTS版本
- 基于Renascence架构的SQL查询引擎设计
- 人民日报申论范文:如何写“担当”“责任”
- Erphp loggedin 异地IP登录自动禁封用户 WordPress插件
- 15、Java基础---继承和访问属性
- c语言开发dota,DOTA 6.70C AI简体中文修正版下载
- 字节跳动bytedance西瓜视频播放器研究
- 金沙滩51单片机74HC138 三八译码器的应用
热门文章
- 整洁代码之道——重构
- 《精通Nginx》——2.3 使用include文件
- I.MX6 Android 5.1 回到 Android 4.2 emmc 启动
- oracle 创建用户、授权、表空间
- golang 切片 slice 去掉重复元素
- linux 内核 内存申请函数 kmalloc、kzalloc、vmalloc 区别
- golang 代码格式化工具 gofmt
- RSA 密钥 明文 密文 长度介绍
- /bin,/sbin,/usr/sbin,/usr/bin 目录区别
- 编写OD插件将IDA中分析出来的函数名导入到OD中