时间戳

首页 > 解决方案 > .bind this 在类方法中

javascript - .bind this 在类方法中

问题描述

我试图了解如何做出反应，我在 youtube 上偶然发现了这个很棒的视频。在这里，他做了类似的事情。

首先我们创建了一个createElementreact函数

function createElement (el, props, ...children ) {
    return div(el,props,children)
}

   function div (el, props, children) {
        // checking if element is class 
            if (isClass(el)) {
                return HandleClass(el, props)
       // more code but skipping adding it since it is irrelevant

function HandleClass (classComponent, props) {
    const component = new classComponent(props)
    return component.render()
} 

window.React = {
    createElement
}

和看起来像这样的 React Class 组件

class Hello extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: 0
        }
    }

    onPlusClick () {
        this.setState({value: this.state.value + 1})
    }

    onMinusClick () {
        this.setState({value: this.state.value - 1})
    }


    render () {
        return React.createElement('div', null, 
        React.createElement('h1', null, 'This is famour foo counter app'),
        React.createElement('h1', null, `Counter Value: ${this.state.value}`),
        React.createElement('button', {onClick: this.onPlusClick.bind(this)}, '+'), //TODO: What does .bind here mean
        React.createElement('button', {onClick: this.onMinusClick.bind(this)}, '-')  //TODO: What does .bind here mean
        )
    }
}

现在，在这里我不明白onClick: this.onMinusClick.bind(this)（在上面的课程中）。有人可以向我解释一下吗？在我个人的 react 项目中，我从来不需要使用 bind 来添加点击事件

谢谢

标签： javascriptreactjs

解决方案

这在react docs中得到了很好的解释。从文档：

您必须小心 JSX 回调中 this 的含义。在 JavaScript 中，默认情况下不绑定类方法。如果您忘记绑定 this.handleClick 并将其传递给 onClick，则在实际调用该函数时 this 将是未定义的。

这不是 React 特有的行为；它是 JavaScript 中函数工作方式的一部分。一般如果引用的方法后面不带()，比如onClick={this.handleClick}，就应该绑定那个方法。

换句话说，您编写为类的方法的任何函数都不知道this当您在该函数中使用它时意味着什么。所以用你的类方法onPlusClick，你要求它this.setState({ ... ])。但在该方法内部，它本身并不知道this指的是什么。您必须告诉它您希望this类方法内部引用您当前所在的类组件。因此需要bind声明。

bind如果您使用箭头功能，您可能从来不需要使用过。箭头函数保留 的上下文this，这意味着当您this在箭头函数中使用单词时，它会自动假定 的含义与this编写箭头函数的上下文中的含义相同。

希望这可以为您解决问题。

推荐阅读