反应状态不适用于下拉菜单以再次隐藏它

Question

我进行了搜索，确实进行了搜索，但没有找到我正在寻找的确切答案。

我有一个导航组件，它工作得很好，除非它处于响应状态，它不会激活状态以再次隐藏它。

我有的就是这个有效

    class Nav extends React.Component {
  constructor(props) {
    super(props)
    this.addActiveClass= this.addActiveClass;
    this.state = {
      hideNavItems: true,
      active: false,
    };
  }

  toggleMenu() {
    const currentState = this.state.active;
    this.setState({
      hideNavItems: !this.state.hideNavItems,
      active: !currentState

    })
  }

  render() {
    return (
      <Wrapper>
        <Desktop>
          <Navlist className={this.props.navClass}>
            <Navitem className="logo"><a href="welcome" className="menu">Jabba's Crypt</a></Navitem>
            <MenuItem tagline="home" />
            <MenuItem tagline="projects" />
            <MenuItem tagline="about" />
            <MenuItem tagline="blog" />
            <MenuItem tagline="contact" />
          </Navlist>
        </Desktop>
        <Tablet>
          <NavitemLogo onClick={this.toggleMenu.bind(this)} className='logo'><Menu href="#" className="menu"><Sparanwrap><Icon name="bars" /></Sparanwrap>Jabba's Crypt</Menu></NavitemLogo>
          <Navlist hide={this.state.hideNavItems} className={this.state.active ? 'slidein' : 'slideout'}>
            <MenuItem tagline="home" />
            <MenuItem tagline="projects" />
            <MenuItem tagline="about" />
            <MenuItem tagline="blog" />
            <MenuItem tagline="contact" />
          </Navlist>
        </Tablet>
      </Wrapper>
    );
  }
}

export default Nav;

但是当我添加时，说

<MenuItem tagline="projects" onClick={this.toggleMenu.bind(this)} className={this.state.active ? 'slidein' : 'slideout'} />

它不再隐藏菜单。我知道我的代码不正确，我知道我遗漏了一些东西。

Answer 1

setState 是异步的，可以与其他调用一起进行批处理，因此在调用中访问状态并不能保证之前的状态。而是尝试使用回调和先前状态的第一个参数来确保使用正确的先前状态：

this.setState(prevState => ({
  hideNavItems: !prevState.hideNavItems,
  active: !prevState.active
}));

在 React documentation 中阅读有关 setState 的更多信息。

一些让您的代码更简洁的技巧：

去掉this.addActiveClass = this.addActiveClass，它什么都不做
在构造函数中绑定方法，这样您就不需要在每个 onClick 中都执行 bind(this)。它也更有效率，因为您不会每次点击都创建一个新函数，this.toggleMenu = this.toggleMenu.bind(this);

Answer 2

你有错误吗？

试试这个代码：

 class Nav extends React.Component {
  constructor(props) {
    super(props)
    this.addActiveClass= this.addActiveClass;
    this.state = {
      hideNavItems: true,
      active: false,
    };
    // change this
    this.toggleMenu= this.toggleMenu.bind(this);

  }

  toggleMenu() {
   // and this, from Andrew my love
   this.setState(prevState => ({
     hideNavItems: !prevState.hideNavItems,
     active: !prevState.active
   }));
  }

  render() {
    return (
      <Wrapper>
        <Desktop>
          <Navlist className={this.props.navClass}>
            <Navitem className="logo"><a href="welcome" className="menu">Jabba's Crypt</a></Navitem>
            <MenuItem tagline="home" />
            <MenuItem tagline="projects" />
            <MenuItem tagline="about" />
            <MenuItem tagline="blog" />
            <MenuItem tagline="contact" />
          </Navlist>
        </Desktop>
        <Tablet>
          {// and this}
          <NavitemLogo onClick={this.toggleMenu} className='logo'><Menu href="#" className="menu"><Sparanwrap><Icon name="bars" /></Sparanwrap>Jabba's Crypt</Menu></NavitemLogo>
          <Navlist hide={this.state.hideNavItems} className={this.state.active ? 'slidein' : 'slideout'}>
            <MenuItem tagline="home" />
            <MenuItem tagline="projects" />
            <MenuItem tagline="about" />
            <MenuItem tagline="blog" />
            <MenuItem tagline="contact" />
          </Navlist>
        </Tablet>
      </Wrapper>
    );
  }
}

export default Nav;

反应状态不适用于下拉菜单以再次隐藏它

React state not working on drop down menu to hide it again

nav

ecmascript-6

reactjs