学习react day03 事件绑定

05事件绑定 方式4种

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        <input/>
        <button onClick={()=>{
            // 普通函数有会有this指向问题
            console.log('click1') 
        }}>add1</button>

        <button onClick={
            // 加（）的话会自执行
            this.handleChick2
            }>add2</button>

        <button onClick={
            this.handleClick3
            }>add3</button>

        <button onClick={()=>{
                this.handleClick4() // 比较推荐
            }}>add4</button>
            
      </div>
    )
  }

  handleChick2(){
    console.log('click2')
  }

  handleClick3 = ()=>{
    console.log('click3')
  }

  handleClick4 = ()=>{
    console.log('click4')
  }
}

06 事件绑定 this指向

import React, { Component } from 'react'


// this指向
export default class App extends Component {
  a = 100
  
  render() {
    return (
      <div>
        <input/>
        <button onClick={()=>{
            // 普通函数有会有this指向问题
            console.log('click1',this.a) 
        }}>add1</button>

        <button onClick={
          // band 改变this指向 手动执行
            this.handleChick2.bind(this)
            }>add2</button>

        <button onClick={
            this.handleClick3
            }>add3</button>

        <button onClick={()=>{
          // 箭头函数this有保障
          // 箭头函数大括号可省略 写法好看
                this.handleClick4()
            }}>add4</button>

          {/* 箭头函数大括号可省略 写法好看 */}
        <button onClick={()=>this.handleClick4()}>add4</button>
      </div>
    )
  }
  handleChick2(){
    //  不用bind this 指向undefined
    // call apply 改变this指向 并自动执行函数 
    // bind 手动执行函数

    console.log('click2',this.a)
  }

  handleClick3 = (evt)=>{
  // 箭头函数
  // evt 事件对象 阻止事件冒泡 默认行为 evt.target获取事件源
  
    console.log('click3', this.a, evt.target)
  }

  handleClick4 = ()=>{
    // 这里不用箭头函数也可
    console.log('click4', this.a)
  }
}

/*
  总结：this指向问题
  01 逻辑不多 推荐
  02 不推荐
  03 推荐
  04 比较推荐  传参时最适合 箭头函数大括号可省略 写法好看
*/

/*
  react事件绑定和原生事件绑定有什么区别？

  react并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理。
    绑在根节点 ，模仿冒泡处理 不用关心解绑问题
*/