如果在 React 中单击 link，SlideMenu 将不会关闭

Question

我有一个关闭的 canvas 菜单，当 isOpen 切换为 true 时，该菜单会滑入。问题是它不会在 Link 单击以转到另一页时滑出。页面已加载，但移动设备关闭 canvas 菜单占满了 100% 的屏幕。

Header.js

class HeaderContainer extends Component {
  state = { isMobile: false }


  componentDidMount() {
    this.updateHeader();
    window.addEventListener('resize', this.updateHeader);
  }

  componentWillUnMount() {
    window.removeEventListener('resize', this.updateHeader);
  }

  updateHeader = () => {
    this.setState({ isMobile: window.innerWidth < 960 });
  }

  render() {
    const { isMobile } = this.state;
    return (
      <header>
        { isMobile  ? <MobileNav/> : <DesktopNav/> }
      </header>
    );
  }
}

MobileNav.js

class MobileNav extends Component {
  state = { isOpen: false  }

  toggleMenu = (event) => {
    event.preventDefault();
    this.setState({ isOpen: !this.state.isOpen });
  }

  render() {
    const { isOpen } = this.state;
    return (
      <div>
        <MenuButton 
          toggleMenu={this.toggleMenu}
          isOpen={isOpen}/>
        <SlideMenu isOpen={isOpen}/>
      </div>
    );
  }
}

export default MobileNav;

SlideMenu.js

const SlideMenu = (props) => {


return (
    <Menu isOpen={props.isOpen}>
      <Nav>
        <StyledLink  exact to="/" activeClassName="selected">Home</StyledLink>
        <StyledLink to="/about" activeClassName="selected">About</StyledLink>
        <StyledLink to="/contact" activeClassName="selected">Contact</StyledLink>
      </Nav>
    </Menu>
  );
}

这是我正在谈论的内容的屏幕截图。

Answer 1

使用 prevState 代替状态 this.setState(prevState => {isOpen => !prevState.isOpen})

Answer 2

slideMenu 没有切换 isOpen 状态的功能。 styledlink 上的 onclick .. 应调用 this.props.toggleMenu 并且应从 toglemenu

中删除 event.ptreventDefault()

正如评论中所讨论的那样，这将起作用。

如果在 React 中单击 link，SlideMenu 将不会关闭

SlideMenu won't close if link clicked in React

javascript

reactjs

react-router

gatsby