React基础（叁）———事件处理

一、事件绑定处理

强烈推荐第四种绑定写法

import React, { Component } from "react";

export default class App extends Component {
  render() {
    return (
      

        
        {() => {
            console.log("click1");
          }}
        >
          add
        

        {this.handleClick2}>add2

        {this.handleClick3}>add3

        {() => {
            this.handleClick4();//推荐
          }}
        >
          add4
        
      
    );
  }

  handleClick2() {
    console.log("click2");
  }

  handleClick3 = () => {
    console.log("click3");
  };

  handleClick4 = () => {
    console.log("click4");
  };
}

/**
 * onMouseOver 鼠标移入触发
 * onClick 鼠标点击触发
 *
 */
 
 /**
 *  React 并不会真正的绑定事件到每一个具体的<>元素上，而是采用事件代理的模式
 */

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

二、ref 引用

引用获取数据

不推荐使用this.refs.username 格式。应为可能多人编辑重名。因此在打开严格模式下会报错。
严格模式如下,index.js文件