事件处理

事件绑定

  1. react 中的无状态组件声明方法必须加声明关键字
exprot default () => {
  var val = ""
  var handleChange = changeState () {}
  return <div>
    <input onChange={handleChange} value={val}/>
  </div>
}
1
2
3
4
5
6
7
  1. 由于 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

我们的事件在 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

由于事件是合成事件,所以当事件是一个异步函数的时候,那么 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

事件类型

原生里的所有事件在 react 里都可以使用,区别是所有事件用 on 绑定,例如:onClick

需要注意的是,在 react 的表单组件里,输入标签也叫受控组件,在绑定 onChang 事件的同时,必须绑定 value 数据,否则报错.

更多关于事件类型open in new window

事件对象

event 对象有几个最常用的,这里列举出来:

  1. currentTarget 事件绑定元素
  2. target 事件触发元素
  3. stopPropagation() 阻止冒泡事件
  4. preventDefault() 阻止浏览器默认事件
  5. nativeEvent 调用原生事件对象
  6. type 事件类型
  7. timeStamp 执行时间
  8. persist() 强制保留 event 属性
  9. bubbles 是否冒泡
Last Updated:
Contributors: websong