时间戳

首页 > 解决方案 > 单击链接时导航抽屉未关闭

javascript - 单击链接时导航抽屉未关闭

问题描述

所以我正在制作一个网站，并为我的导航链接制作了一个移动抽屉，当我点击带有 3 行的按钮并关闭它时，它打开得很好，我做了一个背景，但是现在当我点击一个链接去到下一页导航抽屉没有关闭，要关闭它，我必须点击背景屏幕，我希望在单击页面链接时关闭抽屉。

app.js

  state = {
    sideDrawerOpen: false
  };

  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return { sideDrawerOpen: !prevState.sideDrawerOpen };
    });
  };

  backdropClickHandler = () => {
    this.setState({ sideDrawerOpen: false });
  };

  render() {
    let backdrop

    if (this.state.sideDrawerOpen) {
      backdrop = <Backdrop click={this.backdropClickHandler} />
    }
    return (
      <Router>
        <div className="App">
          <div style={{ height: '100%' }}>
            <Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
            <SideDrawer show={this.state.sideDrawerOpen} />
            {backdrop}
            <Route exact path='/' component={Home} />
            <Route exact path='/Contact' component={Contact} />
            <Route exact path='/Events' component={Events} />
            <Route exact path='/About' component={About} />
            <Route exact path='/Gallery' component={Gallery} />
          </div>
        </div>
      </Router>

drawer.js

         <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/About">About</Link></li>
                <li><Link to="/Events">Events</Link></li>
                <li><Link to="/Gallery">Gallery</Link></li>
                <li><Link to="/Contact">Contact</Link></li>
            </ul>
        </nav>

标签： javascriptreactjsmobile-website

解决方案

您<Router>在 中的组件内呈现app.js，因此更改页面不会触发卸载或重置您的状态。但是，您可以检测 中的页面更改componentDidUpdate，并使用它来手动关闭您的抽屉：

componentDidUpdate(prevProps) {
  const { location } = this.props;
  if (location !== prevProps.location && this.state.sideDrawerOpen) {
    this.setState({ sideDrawerOpen: false });
  }
}

补充阅读：https ://reacttraining.com/react-router/web/api/history/history-is-mutable

推荐阅读