反应事件处理程序功能无需使用bind（）就可以工作

小编典典

反应事件处理程序功能无需使用bind（）就可以工作

reactjs

我正在学习React，遇到了事件处理程序。在React中，建议在将该函数this用作事件处理程序之前将其绑定到。但是，我没有绑定它，但仍获得所需的输出。下面是我的代码：

import React, { Component } from 'react';

class Experiment extends Component {
    constructor(props){
        super(props);

    }

    clickEvent(e){
            e.preventDefault();
            document.getElementById('change').innerHTML="This text changed";
        }

    render(){
        return(
            <div>
                <p id='change'>This paragraph will change</p>
                <button onClick={this.clickEvent}>Press me</button>
            </div>
            );
    }
}

export default Experiment;

如您所见，我尚未绑定clickEvent()到this，但该onClick事件运行顺利。这是为什么？我以为我会undefined出错或发生其他事情

阅读 222

2020-07-22

共1个答案

小编典典

之所以起作用，是因为您没有在clickEvent函数中使用“ this”来引用任何内容。在javascript中，函数中的“
this”变量是指调用该函数的对象。

为了证明这一点，请尝试访问this.props或this.state，由于您缺少您的商品，它们将返回undefined.bind(this)

.bind（）将返回一个新函数，无论从何处调用它，该函数都将保留给定的“ this”上下文。

const myObj = {
    name: 'John',
    testFunction: function() {
        console.log(this.name);
    }
};

const testFunction = myObj.testFunction;

myObj.testFunction(); // John
testFunction(); // undefined


const testFunctionBound = testFunction.bind(myObj);
testFunctionBound(); // John

2020-07-22