React

监听行为

事件

代码示例：

// src/test/Test01.jsx

import React, {Component} from 'react';

export default class Test01 extends Component {
    click01() {
        console.log('click01')
    }

    click02 = () => {
        console.log('click02')
    }

    render() {
        return (
            <div>
                <button onClick={() => {
                    console.log('onClick')
                }}>提交
                </button>
                <button onClick={this.click01}>提交01</button>
                <button onClick={() => {
                    this.click02()
                }}>提交02
                </button>
            </div>
        );
    }
}

// src/test/Test01.jsx

/*
1. 修正指向的方法
    · call（会自动执行函数）
    · apply（会自动执行函数）
    · bind（不会自动执行函数）
*/
import React, {Component} from 'react';

export default class Test01 extends Component {
    a = 100

    click01(evt) {
        console.log('HQSY02', this.a, evt.target)  // 指向的是undefined而不是Test01
    }

    click02 = () => {
        console.log('HQSY03', this.a)  // 指向的是Test01
    }

    click03() {
        console.log('HQSY04', this.a)  // 指向的是被箭头函数调用的this
    }

    render() {
        return (
            <div>
                <button onClick={() => {
                    console.log('onClick', this.a)  // 函数写在render里面指向是Test01
                }}>提交
                </button>
                <button onClick={this.click01.bind(this)}>提交01</button>
                <button onClick={this.click02}>提交02</button>
                <button onClick={() => this.click03()}>提交03</button>
            </div>
        );
    }
}

const obj01 = {
    name: 'obj01',
    getName() {
        console.log(this.name)
    }
}

const obj02 = {
    name: 'obj02',
    getName() {
        console.log(this.name)
    }
}

const obj03 = {
    name: 'obj03',
    getName() {
        console.log(this.name)
    }
}

obj01.getName.call(obj02)  // 改变原本指向的obj01到obj02
obj02.getName.apply(obj03)  // 改变原本指向的obj02到obj03
obj03.getName.bind(obj01)  // 改变原本指向的obj03到obj01