react事件

事件 事件名 = {对应的函数体} 函数体一般都在原型上

<button onClick={this.add.bind(this, 1, 2, 3)}>添加</button>

<button onClick={() => { this.minus() }}>删除</button>

<button onClick={this.e}>事件对象</button>

用 bind 和 箭头函数 每次 render函数执行的时候 我给 onClick 的都是一个新的函数体(事件)

import React from 'react';
import reactDOM from "react-dom"

// 用 bind 和 箭头函数 每次 render函数执行的时候我给 onClick 都是一个新的函数体(事件)

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: "清欢"
        }
    }
    add(a, b, c, d) {
        // 实参
        console.log(a, b, c);
        // 事件对象 最后一个实参对应的就是我们的 事件对象
        console.log(d)
        // 实例
        console.log(this);
    }
    minus() {
        console.log(this)
    }
    // 不传参数建议用这种方式 性能更好
    e = (e) => {
        console.log(this, e);
    }
    render() {
        return <div>
            <h1>{this.state.name}</h1>
            {/* 事件   事件名 = {对应的函数体}   函数体一般都在原型上 */}
            {/* 用bind改变this指向 让它指向自己的实例 */}
            <button onClick={this.add.bind(this, 1, 2, 3)}>添加</button>

            {/*
                render 函数体中的this 就是当前的实例;
                箭头函数中的this 是上级作用域的;
                函数执行 点 前边是谁 this就是谁 
             */}
            <button onClick={() => { this.minus() }}>删除</button>

            <button onClick={this.e}>事件对象</button>
        </div>;
    }
}

reactDOM.render(<>
    <App />
</>, document.querySelector("#root"))