react事件处理

1. 直接在render里写行内的箭头函数 不推荐

2. 直接在组件内定义个函数的方法，然后再render里面直接使用 {this.handleClick2.bind(this)} 不推荐

3. 直接在组件内定义一个非箭头函数的方法，然后子 construtor 里bind(this) 推荐

4. 在组件内使用箭头函数定义一个方法(推荐)

import React, { Component } from 'react'
import './css/01-index.css'
export default class app extends Component {
     a=100
    render() {
        return (
            <div>
                <ul>
                    <li className="li"> <input /></li>
                    <li className="li">1.  <button onMouseOver={() => {
                            console.log("click", "如果处理逻辑过多，不推荐这种写法", this.a)
                        }}>add1</button></li>
                    <li className="li">2. <button onClick={this.handleClick2.bind(this)}>add2-不推荐</button></li>
                    <li className="li">3. <button onClick={this.handleClick3}>add3-推荐这种写法</button> </li>
                    <li className="li">4. <button onClick={() => this.handleClick4()}>add4-比较推荐这种写法-传参</button> </li>
                </ul>
            </div>
        )
    }
    handleClick2() {
        console.log("click2222", this.a) /** bind绑定 指定app的实例 */
    }
    handleClick3=(evt)=> {
        console.log("click3333", this.a, evt.target) 
        console.log("click3333",this.a,evt) 
    }
    handleClick4() {
        console.log("click4444", this.a)
    }
}
/**
 * 改变this指向的方式
 * call, 改成this执行，并且自动执行
 * apply,改成this执行，并且自动执行
 * bind ,改变this指向，不会自动执行，并且手动加小括号执行
 */
var obj1 = {
    name: "obj1",
    getName() {
        console.log(this.name)
    }
}

var obj2 = {
    name: "obj2",
    getName() {
        console.log(this.name)
    }
}

obj1.getName()           // obj1
obj2.getName()          // obj2
obj1.getName.bind(obj2) // 空
obj1.getName.call(obj2) //obj2
/**
 * 快速创建组件 rcc
 * this.handleClick 后面不要加小括号，自动执行
 */

5. react 并不会真正绑定事件到每一个具体的的元素上，而是采用事件代理的模式

6. 事件handler会自动传入event事件，这个对象和普通浏览器的event对象所包含的方法属性一样，不同的是并不是浏览器提供，自己内部构建，同样具有event.stopPropagation event.preventDefault 这种常用的方法