javascript - 函数未传递给 Button 的原因是什么

Question

我知道 JavaScript 的作用域，但可能我不完全理解它们，因为此代码不起作用。

此代码使用 React 和 Relay Modern 框架。

有 2 个按钮，第一个位于 queryRender 内，它被传递到 Relay Modern QueryRenderer 中，第二个位于之后(请参阅函数 render)。第二个可以工作，第一个不执行 clickTest 函数。(这是实际代码的简化版本)

class Candidates extends Component {
  static propTypes = {
    viewer: PropTypes.object
  }

  constructor (props) {
    super(props)
    this.clickTest = this.clickTest.bind(this)
  }

  clickTest () {
    console.log('click works')
  }    

  queryRender ({error, props}) {
    if (error) {
      return <pre>{error.message}</pre>
    } else if (props) {
      return (
        <div>
          <Button onClick={this.clickTest}>this DOESN'T work</Button>
        </div>
      )
    }
    return <Loader active>Loading...</Loader>
  }

  render () {
    return (
      <div>
        <QueryRenderer
          environment={environment}
          query={query} 
          render={this.queryRender}
        />
        <Button onClick={this.clickTest}>this works</Button>
      </div>
    )
  }
}

query 变量已定义，我只是没有将其包含在摘录中。

当我用匿名函数替换第一个按钮的 onClick 函数时

<Button onClick={() => this.clickTest()}>this DOESN'T work</Button>

然后我得到这样的错误:Uncaught TypeError: _this2.clickTest is not a function

任何人都可以向我解释为什么这段代码的行为如此吗？

Answer 1

在 javascript 中，this 的含义不是在函数创建时确定的，而是在调用时确定的。当 QueryRenderer 调用您的 queryRender 函数时，它不知道需要在您的类的上下文中调用它，因此 this 不会引用您认为它所引用的内容。

您要么需要绑定(bind)您的queryRender函数，就像您在构造函数中使用clicktest函数一样，要么您需要重新设计queryRender，这样它就不需要对this<的引用.