如果链接在React中单击，则SlideMenu不会关闭

Question

我有一个非画布菜单，当isOpen切换为true时会滑入。问题是它不会在Link点击时退回到另一个页面。页面加载但移动画布菜单填充了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

slideMenu没有切换isOpen州的功能。应该调用styledlink上的this.props.toggleMenu点击，并且应该从toglemenu中删除event.ptreventDefault()

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

Answer 2

使用prevState this.setState(prevState => {isOpen => !prevState.isOpen})

而不是州