如何设置关闭警报只显示一次

Question

我尝试找到在用户进入该页面时第一次显示解除警报的方法，然后当用户再次单击该页面时它不会再显示该警报。

我使用这个网站的代码：https://reactstrap.github.io/components/alerts/

我的代码：

    this.state = {

     hasVisitedPageBefore: false,
};

  visitPage() {
this.setState({ hasVisitedPageBefore: true });

 }

showAlert() {
return (
  <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
    Congratulations! You have been created deck.
  </Alert>
);
  }


 render
{this.state.hasVisitedPageBefore ? null : showAlert}

你们知道怎么查吗？请建议我。

谢谢

Answer 1

如果我理解正确的话，你想 "remember" 用户访问过某个页面，这样当用户再次访问时，你必须以不同的方式显示你的页面（即没有警告).

您需要有一个状态变量 hasVisitedPageBefore（或者您选择的任何名称！）。启动应用程序时将其设置为默认值 false。当页面被访问时，将变量设置为true.

然后在您的页面中，根据 hasVisitedPageBefore 是 true 还是 false 显示或隐藏警报。

    <div>
      {hasVisitedPageBefore?null:<Alert>Message</Alert>}
      <MyPage />
    </div>

如果您对细节有疑问，请随时询问。

Answer 2

您可以借助 localstorage 在不同页面之间保留标志

例如。在构造器中启动

constructor() {
 this.state = {
    hasVisitedPageBefore: localStorage.get("hasVisited") || false,
 };
}

现在在

中设置已访问标志

visitPage() {
    localStorage.set("hasVisited", true)
    this.setState({ hasVisitedPageBefore: true });
 }

如果您想在当前浏览会话中保留此首选项，可以使用 sessionStorage。

[这只是一个想法，请原谅我的语法]

如何设置关闭警报只显示一次

how to set dismissing alert to show just once

reactjs

react-router

redux

react-redux

reactstrap