javascript - 如果在 React 中单击链接，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

slideMenu 没有切换 isOpen 状态的功能。点击 styledlink .. this.props.toggleMenu 应该被调用并且 event.ptreventDefault() 应该从 toglemenu 中移除

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