Reactjs 我如何使这个按钮工作

我在一个名为

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> 

注销

现在，我如何才能做到这一点呢？

只需删除（）

如果函数在渲染的同一类中

<button onClick={this.logout} >

---

您必须传递一个函数，该函数将在每次单击按钮时调用

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

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

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

logout（）}>
注销

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

注销

如果使用带有以下语法的

onClick

，则每次渲染时都会调用

注销

函数：

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

注销

因此，我的建议是，如果您有一个功能组件，请使用如下方法：

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

logout（）}>注销

我希望这有帮助

logout（）}>注销

---

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

如果我理解您的问题，您希望创建一个注销函数 所以 用于Html部分

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

---

如果我错了，告诉我，我会给你另一个：）

你好，这是一个注销反应函数在那里我只想加入他们函数在一个名为auth的文件夹中，我的按钮在另一个文件夹中我尝试了导入和位置，但它发送给我错误

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

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

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

}