事件处理--函数的调用(含this关键字的)
函数 -- 调用 关键字 this 事件处理
2023-09-27 14:25:18 时间
事件处理一: 触发函数的方法
import React from 'react'
export default class App extends React.Component {
render() {
return (
<div>
<input/>
<button onClick={
()=>{
alert("触发函数")
}
}>add 匿名函数触发</button>
<input/>
<button onClick={this.handleClick}>add 单独函数触发</button>
<button onClick={this.handleClick2}>add 单独函数触发,函数另外一种写法</button>
<button onClick={ ()=>{
this.handleClick()
this.handleClick2()
}}>add 里面可以指定执行多个函数</button>
</div>
)
}
handleClick(){
console.log("函数触发1")
}
handleClick2=() =>{
console.log("函数触发2")
}
}
https://www.bilibili.com/video/BV1dP4y1c7qd/?p=10&vd_source=caabcbd2a759a67e2a3de8acbaaf08ea
事件二: 含this关键字的 函数调用方法
import React from 'react'
export default class App extends React.Component {
a="变量a"
render() {
return (
<div>
{/* 直接匿名函数可以获取类的变量 */}
<button onClick={
()=>{
console.log(this.a)
}
}>add 匿名函数触发</button>
{/* 函数调用,函数里面要拿类里面的变量
要加bind 改变this的指向为类
如果加call 改变他会自动执行一次指定的函数,但是点击是不会触发成功的
*/}
<button onClick={this.handleClick.bind(this)}>add 单独函数触发</button>
<button onClick={this.handleClick2}>add 调用匿名函数触发--(推荐写法)</button>
{/* 单个调用写法 */}
<button onClick={ ()=>this.handleClick3()}>add 匿名函数里面调用函数触发 --非常推荐的写法-方便传参</button>
{/* 调用多个函数写法 */}
<button onClick={ ()=>{
this.handleClick3()
this.handleClick3()
}}>add 匿名函数里面调用函数触发</button>
</div>
)
}
// 调用的时候要加bind指定this
handleClick(){
console.log("函数触发1",this.a)
}
// 调用的时候 这种匿名 函数 不需要指定this
handleClick2=()=>{
console.log("匿名函数触发",this.a)
}
handleClick3(){
console.log("匿名函数触发",this.a)
}
}
this看谁去调用,匿名函数指向是类的本身
相关文章
- 【 Python 】函数的参数
- 人脸识别-损失函数:概述【Softmax loss-->Centre loss-->L-Softmax Loss-->SphereFace-->CosFace-->ArcFace】
- Scala:Scala基础语法【Scala语言是一个完全面向对象编程语言-->万物皆对象;Scala语言是一个完全函数式编程语言-->万物皆函数】
- C#程序设计--Parse函数的用法
- java--函数练习
- Linux系统调用--getrlimit()与setrlimit()函数详解
- MySQL内置函数获取几天前的日期
- drf url路由在函数上指定url绑定的方法
- vue3--学习技术胖笔记----第二波 生命周期和钩子函数
- unity 使用GameObject.SetActive(true)激活对象时,会在SetActive内部调用Awake和OnEnable函数
- HDU 1847 Good Luck in CET-4 Everybody!(找规律,或者简单SG函数)
- 【C/C++】概念: VC虚函数布局引发的问题
- Linux再学--shell基础4函数
- 求数组差/交集函数-php数组函数(二)
- 前端笔记(3) Javascript 字符串函数 数组函数
- SSDTHook实例--编写稳定的Hook过滤函数
- Python numpy.fromfunction函数方法的使用
- 备份3个判断指针是否有效的函数,以备不时之需
- 一分钟知识点:钩子函数
- 在分析函数基础上性能提高5倍的postgresql/lightdb特性--使用LATERAL JOINS代替分析函数优化按照每大类查询TOP N语句
- Oracle spatial抽稀函数(SDO_UTIL.SIMPLIFY)
- 【C语言】14-返回指针的函数与指向函数的指针
- python--ctypes模块:调用C函数
- python--数学运算函数
- 这个函数有搞头,要调试通过就差不多啦--ImpersonateActiveUserAndRun
- 这个贴子的内容值得好好学习--实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化
- Nodejs的偏函数
- C语言--函数--指针简介