React:当它在另一个函数里面时,不能调用prop函数吗？

Question

我正在尝试按照他们的教程中的描述移动Auth0登录功能.如果我像这样使用它,我能够使它工作:

<button className="btn" onClick={this.props.route.auth.login.bind(this)}>test</button>

但如果我设置按钮来调用一个函数我在上面定义了渲染函数,如下所示:

  login() {
   this.props.route.auth.login.bind(this);
  }

并改变onclick如下:

onClick={this.login()}

要么

onClick={() => this.login()}

然后auth登录模式永远不会打开,我没有收到任何错误.另外我添加了一个console.logto login(),我可以在控制台中看到它,但实际的登录模式永远不会打开？它适用于第一个示例,但不适用于其他示例.

我试图将其转换为函数的原因是因为我想稍后将登录函数传递给子组件,而我无法这样做,我相信这是阻止我的根本问题.

Answer 1

bind 不会调用你的函数:

bind()方法创建一个新函数,在调用时,将其this关键字设置为提供的值,并在调用新函数时提供任何前面提供的给定参数序列.文档

此外,您将onClickprop 的值设置为返回值login.如果要传递对该函数的引用,则必须在没有该函数的情况下执行该操作().

您的代码应如下所示:

<button className="btn" onClick={() => this.login()}>test</button> <!-- You need to keep a reference to `this`, hence the binding -->

然后:

login() {
   this.props.route.auth.login();
}

我编辑了答案,以便它使用箭头功能.但是,我不喜欢这样做,因为它使代码有点麻烦,而且bind构造函数中的所有函数都像@ patrick-w-mcmahon那样.