Question

所以我正在使用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（），以便每次调用时都知道。

Answer 1

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

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

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

您可以在ES-6中做到

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

始终在onclick中响应调用函数

1 个答案: