Question

好吧，我在名为auth的文件夹中有一个函数，该文件夹包含具有此功能的auth.js文件：

logout() {
    // Clear Access Token and ID Token from local storage
    localStorage.removeItem('access_token')
    localStorage.removeItem('id_token')
    localStorage.removeItem('expires_at')
    localStorage.removeItem('chatkit_user')
    //TODO: callback to reset the app state.
}

然后我在另一个文件夹中有以下代码：

<button onClick={ logout() } >
    Log Out
</button>

现在我该如何进行这项工作？

Answer 1

只需删除（）

<button onClick={logout} >

如果您的函数与渲染器位于同一类中

<button onClick={this.logout} >

Answer 2

您必须传递一个每次单击按钮都会调用的函数。

相反，当前您正在立即调用该函数，然后传递该调用的结果。

一种方法是使用箭头函数包装属性，如下所示：

<button onClick={() => logout()} >
  Log Out
</button>

或者直接传递函数而不调用它（请注意，当传递类方法时，这将无法正常工作，您需要首先绑定它们）：

<button onClick={logout} >
  Log Out
</button>

Answer 3

如果您使用onClick和以下语法，则logout函数将在每个渲染器上调用：

<button onClick={ logout() }>Log Out</button>

因此，如果您具有功能组件，我的建议将使用以下内容：

<button onClick={ () => logout() }>Log Out</button>

我希望这会有所帮助！

Answer 4

（）=> logout（），这基本上会为您返回一个将在单击时调用的函数，因此它应该可以工作。

Answer 5

如果我了解您的问题，那么您想创建一个注销功能所以 HTML部分

<button onClick="logout()">logout</button>

对于Javascript

function logout() {
 window.localStorage.removeItem("access_token");
 window.localStorage.removeItem("id_token");
 window.localStorage.removeItem("access_token");
 window.localStorage.removeItem("chatkit_user");

}

如果我错了告诉我，那么我再给你一个：）

我如何使此按钮起作用

5 个答案: