Javascript SlideMenu-won'；如果在React中单击链接，则不会关闭

我有一个非画布菜单，当

isOpen

切换为true时，它会滑入。问题是，它不会在

链接上滑出

以转到另一页。页面会加载，但移动离开画布菜单会占据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>
    );
  }
}

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;

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>
  );
}

SlideMenu.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>
    );
  }
}

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;

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>
  );
}

const SlideMenu=（道具）=>{
返回(
家
关于
接触
);
}

这是我所说内容的截图。

---

使用prevState

而不是state。设置状态（prevState=>{isOpen=>！prevState.isOpen}）

slideMenu

没有切换

isOpen

状态的功能。单击

styledlink

<应该调用code>this.props.toggleMenu，并且应该从toglemenu中删除

event.ptreventDefault（）

---

如评论中所述，这将起作用

如何在渲染函数中向下调用

isOpen

？slideMenu没有切换isOpen状态的函数。单击样式链接。。应该调用this.props.toggleMenu.called

onClick={props.toggleMenu}

并且它会删除slideMenu，但不会更改页面。您可以发布..的代码吗。。styledlink组件我使用的是

样式化组件

，所以它只是JS中的CSS。从toglemenu中删除even.ptreventDefalt（）