React学习一 事件绑定

React事件绑定实质

传入的事件是一个默认调用 所用要注意this指向

 const obj = {
      name: "obj",
      foo: function() {
        console.log("foo:", this)
      }
    }

    // obj.foo()

    const config = {
      onClick: obj.foo.bind(obj)
    }

    const click = config.onClick
    click()

扩展：常见的this指向：

        1.默认绑定 独立执行 foo()
        2.隐式绑定 被一个对象执行 obj.foo() -> obj
        3.显式绑定: call/apply/bind foo.call("aaa") -> String("aaa")
        4.new绑定: new Foo() -> 创建一个新对象, 并且赋值给this

应对策略：

            {/* 1.this绑定方式一: bind绑定 */}
            类组件 constructor中的代码
            this.btn1Click = this.btn1Click.bind(this)
            <button onClick={this.btn1Click}>按钮1</button>
            
            {/* 2.this绑定方式二: ES6 class fields */}
            btn2Click = () => {
                 console.log("btn2Click", this)
                this.setState({ counter: 1000 })
             }
            <button onClick={this.btn2Click}>按钮2</button>


            {/* 3.this绑定方式三: 直接传入一个箭头函数(重要) */}
            <button onClick={() => console.log("btn3Click")}>按钮3</button>
            <button onClick={() => this.btn3Click()}>按钮3</button>