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

}

Answer 2

您传递的是箭头函数，而不仅仅是传递对单击处理程序的引用，而箭头函数又会调用登录函数。

这应该给您带来了什么？

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

签出react handling events docs

Answer 3

因为您的语法错误。正确的语法是：

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

Answer 4

尝试使登录功能响应事件login = (event) => {，并添加event.preventDefault()

此外，我不确定这是否真的很重要，或者这是样式问题，但是您可以尝试onClick={this.login}

在渲染上调用onClick

4 个答案: