javascript - 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 lambda 可能会导致性能问题，因为它会在每次渲染时创建一个新函数。您可以改为执行以下操作以防止生成新函数。

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>
    );  
  }

}