Reactjs 为什么在react click事件中使用“this”关键字？

我有一个类组件，然后我创建了一个按钮并向其中添加了onClick事件。 现在我创建了一个在onClick事件触发时调用的函数。 将函数引用到onClick时， 为什么我们要使用像{this.function name}这样的东西，而不是简单地

---

{function name}？

在不同的组件中，可能有许多名为function name的函数。当您想要调用它们时，您需要准确地指定所引用的函数。使用关键字意味着您希望使用附加到当前组件的函数名

this.function-name：当前组件的函数名。 otherComponent.function-name：来自另一个组件的函数名。

---

我建议你阅读“这”的基本理解

console.logthis==窗口//真的

基本上，这是帮助我们将自定义函数/事件绑定到全局“窗口”事件的关键字

---

不仅对于React，它对于所有JavaScript都是通用的。

这都是关于JavaScript作用域的。 例如：

class Example extends Component {

    clicked() {
        console.log('clicked');
    }

    render() {

        const innerFuncClicked = () => console.log('inner click');

        return (
            <button
                onClick={clicked}
                onClick={this.clicked}
                onClick={this.clicked.bind(this)}
                onClick={() => this.clicked()}
                onClick={innerFuncClicked}
            />
        );
    }
}

对于上面的代码，我将描述您将看到的每个onClick。 当然，不能有几个onclick，因为只有最后一个onclick会覆盖其余的onclick

1单击的函数未在作用域中定义，因此它将中断

2这将打破以及点击发生在按钮组件内部，与此不同

3这将起作用，因为我们将当前的this绑定到函数

4当我们创建一个箭头函数时，它将起作用，而这个箭头函数不会影响当前

---

5这将起作用，因为func innerFuncClicked存在于作用域中

，因为您需要附加到组件的函数？因为您将函数名附加到一个上下文，该上下文应该是您的react组件，而react组件是一个javascript类，没有它，它怎么知道函数名是什么，除非它在全局作用域中，这是不好的。因为方法是在类中定义的，要访问类属性或方法，必须使用此关键字。您忘记了简单的旧函数名，这就是问题的实际问题：/