时间戳

首页 > 解决方案 > 一直在 onclick 中响应调用函数

javascript - 一直在 onclick 中响应调用函数

问题描述

所以我正在使用 reactjs 和 node 来制作一个网站。在这个作为登录按钮的组件中，它跟踪用户是否使用我在别处定义的另一个类/对象登录。问题是我将它设置为在用户登录时调用注销功能（以及说注销而不是登录），但是这个 onClick 功能会在按钮被点击一次时立即触发。

class LoginButton extends React.Component {
  render() {
    if (AuthService.isAuthed() === false) {
      return (
        <li className="menu_button">
          <Link to="/login">Login</Link>
        </li>
      );
    } else {
      return (
        <li className="menu_button">
          <a href="/" onClick={console.log('Attempted to logout!')}>
            Logout
          </a>
        </li>
      );
    }
  }
}

我将注销功能更改为只是一个 console.log() 以了解每次调用它。

标签： javascriptnode.jsreactjs

解决方案

您的 onClick 方法必须是一个函数，而不是执行函数的结果。就像是：

function onClick() {
    console.log("Attempted to logout!")
}

<a href="/" onClick={ onClick }>

在 ES-6 中你可以做

<a href="/" onClick={ () => console.log("Attempted to logout!") }>

推荐阅读