Question

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

Answer 1

您可能在不同的组件中有许多称为function-name的功能。当您要调用它们时，需要准确指定要引用的功能。使用关键字this意味着您要使用附加到当前组件的function-name。

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

Answer 2

我建议您阅读对“ this”的基本理解。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

console.log（this === window）; // true

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

不仅适用于React，而且适用于所有JavaScript。

Answer 3

这都是关于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”，因为只有最后一个会覆盖其余的。

1）函数“ clicked”未在范围内定义，因此会中断

2）这将中断，同时按钮组件内部将发生“单击”，并带有不同的“ this”

3）当我们将当前的“ this”绑定到函数上时，这将起作用

4）当我们创建一个不会伤害当前“ this”的箭头功能时，它将起作用。

5）这将起作用，因为功能“ innerFuncClicked”存在于范围中

为什么在响应点击事件中应使用“ this”关键字？

3 个答案: