事件处理
事件绑定
- react 中的无状态组件声明方法必须加声明关键字
exprot default () => {
var val = ""
var handleChange = changeState () {}
return <div>
<input onChange={handleChange} value={val}/>
</div>
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 由于 class 组件的 this 指向原因,事件函数的 this 需要绑定
// 1. 第一种在构造函数里绑定
constructor() {
super()
// 如果这里不声明,那么handlechange里的this是undefined
this.handleChange = this.handleChange.bind(this)
}
handleChange() {
console.log(this)
}
render() {
return <div>
<button onChange={this.handleChange}>btn</button>
</div>
}
// 2. 第二种在元素上绑定this
<button onClick={this.handle.bind(this)}>btn</button>
// 3. 第三种也是我们开发时常用的,用箭头函数来声明事件方法
construtor(){}
handleChange = (event) => { console.log(this,event) }
rebder() { return <button onClick={this.handle}>btn</button>}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
我们的事件在 react 里都叫合成事件,和原生 dom 事件一样,事件函数都会被注入一个 event 事件对象.下面说一下传参数.和 vue 不一样的是 react 传参数不能直接在 dom 上写直接调用.
因为我们的 jsx 都是React.createElement()
生成的,所以参考下面的代码:
React.createElement('div', { onClick: this.handleChange(666) }, "我是内容")
// 是的,这个div我没有点击它就自动执行了事件,就是因为这个函数我们这样写就是立即执行的调用.所以我们要改.这里直接用jsx语法,上面的写法只是为了解释为什么
<div onClick={ () => this.handleChange(666) }>点我</div>
// 如果需要event对象那么需要手动注入了
<div onClick={ (event) => this.handleChange(event,666) }>点我</div>
1
2
3
4
5
2
3
4
5
由于事件是合成事件,所以当事件是一个异步函数的时候,那么 event 对象里的参数会丢失,这时候我们需要使用一个 event.persist()来强制保留属性值,比如防抖函数和截流函数会需要到.
合成事件的唯一好处就是不存在兼容问题.
截流&防抖
使用 lodash,由于 react 特性,所以使用截流防抖有点麻烦.
debounce[防抖]当用户结束触发后的一定延时结束后,执行,适用于表单输入搜索
throttle[截流]在一定时间内执行一次方法,比如用户一直操作,但是到了延时结束,则会执行一次方法,适用于滚动事件监听
以下代码用防抖做介绍,截流写法一样
截流防抖入参一致,下面代码是防抖的,这里贴一个截流的说明文档open in new window
import React from "react";
import debounce from "lodash/debounce";
export default class Index extends React.Component {
constructor() {
super();
this.state = {
val: "",
};
// 1. 绑定防抖函数,debounce自身返回一个函数,可以理解为是加工
this.handle = debounce(this.handle, 2000);
}
// 1.1 该函数是具体执行函数,用来做最后值获取处理的
handle = (event) => {
console.log(event.target.value);
};
// 2. 这个函数是将dom上的箭头函数提出来了而已
source = (event) => {
event.persist();
this.handle(event);
};
render() {
// 如下有两个input 它们的写法等价,无非就是一个用了箭头函数看着不美观,第二个看着好看,但是多个了函数
return (
<div>
<input
onChange={(event) => {
event.persist();
this.handle(event);
}}
val={this.state.val}
/>
<br />
<input onChange={this.source} val={this.state.val} />
</div>
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
事件类型
原生里的所有事件在 react 里都可以使用,区别是所有事件用 on 绑定,例如:onClick
需要注意的是,在 react 的表单组件里,输入标签也叫受控组件,在绑定 onChang 事件的同时,必须绑定 value 数据,否则报错.
事件对象
event 对象有几个最常用的,这里列举出来:
- currentTarget 事件绑定元素
- target 事件触发元素
- stopPropagation() 阻止冒泡事件
- preventDefault() 阻止浏览器默认事件
- nativeEvent 调用原生事件对象
- type 事件类型
- timeStamp 执行时间
- persist() 强制保留 event 属性
- bubbles 是否冒泡