React初探 – 事件处理(this指向问题)

Daming 2020-02-22
0条评论 191 次浏览
Daming 2020-02-220条评论 191 次浏览

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>
1+

发表评论

电子邮件地址不会被公开。