React初探 – 事件处理（this指向问题）

react元素绑定事件的属性名要用驼峰写法:

//html 写法:
<button onclick="test()">按钮</button>

//react写法:
<button onClick={test}>按钮</button>

react事件函数 this指向问题（JS this指向问题）

定义一个组件

<div id="event"></div>

    class TestEvent extends React.Component {

        constructor(props) {
            super(props);

        }

        handleClick() {
            console.log("点击事件执行函数", this)// 这里 的this  是 undefined
        }



        render() {
            return <div><p>事件绑定</p>
                <button onClick={this.handleClick}>按钮</button>
            </div>
        }
    }


    ReactDOM.render(
        <TestEvent/>,
        document.getElementById('event')
    );

按理说 点击按钮后 handleClick 中 打印的是 当前组件，但实际上是undefined，参考官网教程以及网络资料了解到 handleClick 并不是 this.handleClick() 这样被调用的（如果是这样的话this指向就没有问题）。

谁最后调用的函数，函数中的this就指向谁（this 默认指向全局的 window, 在 strict 模式 this 的值为undefined。）

let obj = {
  handleClick() {
    console.log(this)
  },
  onClick(callback) {
  callback()
  }
};

obj.onClick(obj.handleClick);//this 打印为 window
obj.handleClick();//this 打印为 obj 对象

根据上方代码可以这样理解，我们实际上是执行obj的onClick方法，事件的处理函数 this.handleClick 是被作为回调函数传入onClick中，当回调函数执行时 (callback()),并没有谁在显示的调用callback，所以callback 中的this指向了window，开启严格模式后，this的值就是undefined。

所以react中事件函数 this指向丢失的问提并不是react问题，只是js本身的规则。

react这块到底是如何处理的 还需要以后学习react源码来深入的学习

让 this指向 符合我们的预期

第一种方法：使用bind绑定this

    class TestEvent extends React.Component {

        constructor(props) {
            super(props);
             //在构造函数中使用bind改变this.handleClick函数的this指向后再赋值给this.handleClick
             this.handleClick = this.handleClick.bind(this);

        }

        handleClick() {
            console.log("点击事件执行函数", this)// this
        }


        render() {
            return <div><p>事件绑定</p>
                <button onClick={this.handleClick}>按钮</button>
            </div>
        }
    }

第二种方法：属性初始化器语法

    class TestEvent extends React.Component {

        constructor(props) {
            super(props);
        }

        handleClick = ()=> {
            console.log("点击事件执行函数", this)// this
        }


        render() {
            return <div><p>事件绑定</p>
                <button onClick={this.handleClick}>按钮</button>
            </div>
        }
    }

第三种方法：在回调函数中使用箭头函数

    class TestEvent extends React.Component {

        constructor(props) {
            super(props);
        }

        handleClick {
            console.log("点击事件执行函数", this)// this
        }


        render() {
            return <div><p>事件绑定</p>
                <button onClick={(e)=>{this.handleClick(e)})}>按钮</button>
            </div>
        }
    }

向事件处理函数传值

<button onClick={(e) => this.handleClick(id, e)}>按钮</button>
<button onClick={this.handleClick(this, id)}>按钮</button>