onClick调用渲染

Question

当我的应用程序呈现我的onClick事件中包含的函数时,无理由调用.我查看了其他一些帖子,并实施了他们的建议但没有成功.

我的功能

login = () => {
        this.props.login();
    };

标签内的onClick事件

<a style={{cursor: 'pointer'}} onClick={ () => this.login }> Log In </a>

Answer 1

你需要像这样传递你的lambda:

<a style={{cursor: 'pointer'}} onClick={ () => this.login() }> Log In</a>

注意括号.正如您所拥有的那样,当脚本运行/您的组件呈现时,将自动调用该函数.

值得注意的是,使用JSX lambdas会导致性能问题,因为它会在每个渲染上创建一个新函数.您可以执行以下操作以防止生成新函数.

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
  }

  public function login(event) {
    // do something
  }

  render() {
    return(
      <a onClick={this.login}>Log In</a>
    );  
  }

}

Answer 2

您不只是传递对单击处理程序的引用，而是传递一个正在调用的箭头函数，该函数又调用登录函数。

这应该给你你所追求的：

<a style={{cursor: 'pointer'}} onClick={ this.login }> Log In </a>

查看React 处理事件文档