React组件书写事件

绑定事件

• 全局变量 / 外部函数 ------ 1%
• 组件内部自定义函数 ------ 99%
• 原型链挂载 ------ 0%

**全局变量 **

// 绑定事件
// 1. 全局变量 / 外部函数   1%

import React,{Component} from "react"

// 全局变量，是一个对象，也是一个函数
const actions = { 
    fnA(e){
        console.log('wuhan2004 - 必胜')
        console.log(e)
    },
    fnB(){
        console.log("I am B")
    },
    fnC(){
        console.log("I am C")
    },
    fnD(e){ 
        console.log("I am D")
        console.log(e)
    },
    parent(){
        console.log("I come from parent")
    }
}

export class EventDemo extends Component{
    render(){
        return (
            <div onClick={actions.parent} style={ {color:"red",backgroundColor:"orange",fontSize:30} }>
                <h2 onClick={ actions.fnA }> Event React 如何书写事件 </h2>
                <h2 onClick={ actions.fnB }> React 事件必须遵循驼峰命名 </h2>
                <h2 onClick={ () => actions.fnC() }> 我是箭头函数 </h2>
                <h2 onClick={ (event) => actions.fnD(event) }> 我是带参的箭头函数 </h2>
            </div>
        )
    }
}

外部函数以及原型链挂载

// eventDemo.js文件

// 绑定事件
// 2. 组件内部自定义函数    99%
// 3. 原型链挂载            0%

import React,{Component} from "react"
import { getSome } from "../utils"


// 全局变量，是一个对象，也是一个函数
const actions = { 
    fnA(e){
        console.log('wuhan2004 - 必胜')
        console.log(e)
    },
    fnB(){
        console.log("I am B")
    },
    fnC(){
        console.log("I am C")
    },
    fnD(e){ 
        console.log("I am D")
        console.log(e)
    },
    parent(){
        console.log("I come from parent")
    }
}

export class EventDemo extends Component{
    render(){
        return (
            <div>
                <div onClick={actions.parent} style={ {color:"red",backgroundColor:"orange",fontSize:30} }>
                    <h2 onClick={ actions.fnA }> Event React 如何书写事件 </h2>
                    <h2 onClick={ actions.fnB }> React 事件必须遵循驼峰命名 </h2>
                    <h2 onClick={ () => actions.fnC() }> 我是箭头函数 </h2>
                    <h2 onClick={ (event) => actions.fnD(event) }> 我是带参的箭头函数 </h2>
                </div>

                <div onClick={this.myjs.todo} onTouchMove={getSome} style={ {width:150,height:150,backgroundColor:"pink"} }>
                    touchmove
                </div>
            </div>
        )
    }
}

// 原型链挂载
EventDemo.prototype.myjs = {
    todo(){
        console.log("todo - js");
    }
}片

// index.js文件

export const getSome = () => {
    console.log("touchmove --- getSome");
}

组件内部自定义函数

// 绑定事件
// 2. 组件内部自定义函数    99%

import React,{Component} from "react"

export class EventDemo2 extends Component{

    handleClick(){
        console.log("React is so difficult");
    }

    handleMove(e){
        console.log(e.clientX)
    }

    handleInput(e){
        console.log(e.target.value)
    }

    handleTestThisOne(){ // react 组件内部的 自定义函数 this 为空
        console.log(this)
    }

    handleTestThisTwo(){
        console.log(this)
    }

    handleTestThisThree=()=>{
        console.log(this)
    }

    constructor(){
        super()
        // 强制改变this指向
        this.handleTestThisOne = this.handleTestThisOne.bind(this)
    }

    render(){
        console.log(this);
        return (
            <div>
                <div onMouseMove={(event)=>this.handleMove(event)} style={ {width:150,height:150,backgroundColor:"red"} }>
                    mousemove
                </div>

                {/* 相对于onInput、onChange事件，react官方推荐使用onChange事件 */}
                <p>
                    input:<input onInput={this.handleInput}/>
                </p>
                <p>
                    change:<input onChange={this.handleInput}/>
                </p>

                <button onClick={ this.handleClick }>自定义事件</button>
            
                <div>
                    <button onClick={this.handleTestThisOne}>测试自定义函数的this - one</button>
                    <button onClick={()=>this.handleTestThisTwo()}>测试自定义函数的this - two</button>
                    <button onClick={this.handleTestThisThree}>测试自定义函数的this - three</button>
                </div>
            </div>
        )
    }
}

react中的this

• react 组件内部的 自定义函数 this 为空
• 但是箭头函数会保留 this 指向
• 箭头函数本身没有 this，但是它会借用函数外部代码的 this（不能 new 继承）
• 箭头函数的 this 永远指向函数定义的时候（外部代码块的 this），而不是函数执行的时候
• constructor 构造器也可以改变 this 指向（强制的）
  
  

箭头函数原型方法的两种写法