在鼠标进入/离开时展开和折叠导航，反应

Question

我的页面侧面有一个导航栏。我通过一个反应引导网站得到它，所以类名等是预加载的。我希望在鼠标进入/离开时执行此操作，而不是使用切换汉堡标志来展开/折叠导航。以下是我到目前为止的尝试，我为鼠标进入和离开创建了 2 个处理程序，并且我使用了检查元素，因此在展开和折叠时列出导航的类名。

然后我尝试根据鼠标是否在导航中为导航提供这些类名称，但它不起作用:(请帮助

class App extends Component {
  render() {

    let sideNav;

    const mouseEnter = e => {
      sideNav = "sideNav sidenav---sidenav---_2tBP sidenav---expanded---1KdUL";
      console.log("Mouse entered");
      return sideNav;
    }    

    const mouseLeave = e => {
      sideNav = "sidenav---sidenav---_2tBP sidenav---collapsed---LQDEv";
      console.log("mouse left");
      return sideNav;
    }

    return (
      <div className="App container">
        <div>
          <SideNav 
            onMouseEnter={mouseEnter} 
            onMouseLeave={mouseLeave}
            className={this.sideNav}
            onSelect={(selected) => {
                // Add your code here
            }}
          >
            <SideNav.Toggle  />
            <SideNav.Nav  defaultSelected="home">
                <NavItem eventKey="home">
                    <NavIcon>
                        <Link to="/"><img src={Dash}/></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/">Dashboard</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="sites">
                    <NavIcon>
                      <Link to="/sites"><img src={Site} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/sites">Sites</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="tours">
                  <NavIcon>
                    <Link to="/tours"><img src={Tour}/></Link>
                  </NavIcon>
                  <NavText>
                      <Link to="/tours">Tours</Link>
                  </NavText>
                </NavItem>
                <NavItem eventKey="media">
                    <NavIcon>
                      <Link to="/media"><img src={Media}/> </Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/media">Media</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="newSite">
                    <NavIcon>
                        <Link to="/newSite/details"><img src={NewSite} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/newSite/details">Add new Site</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="profile">
                    <NavIcon>
                        <Link to="/profile"><img src={Profile} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/profile">Profile</Link>
                    </NavText>
                </NavItem>

            </SideNav.Nav>
          </SideNav>
        </div>
        <Routes />
      </div>
    );
  }
}

export default App;

Answer 1

我认为您应该在组件的状态下使用 sideNav，因为它是重新渲染元素的反应方式。每次使用 setSate 时，响应搜索代码中的更改以显示您想要的内容。当你只是更新你的变量时，react 并不知道这一点。因此，如果您这样做，您的代码可能会像这样工作：

class App extends Component {
  constructor(){
      super();
      this.state = {
        sideNav: ''
      }
  }
    const mouseEnter = e => {
      this.setState({sideNav: "sideNav sidenav---sidenav---_2tBP sidenav---expanded---1KdUL"});
      console.log("Mouse entered");
    }    

    const mouseLeave = e => {
      this.setState({sideNav: "sidenav---sidenav---_2tBP sidenav---collapsed---LQDEv"});
      console.log("mouse left");
    }
  render() {

    return (
      <div className="App container">
        <div>
          <SideNav 
            onMouseEnter={mouseEnter} 
            onMouseLeave={mouseLeave}
            className={this.state.sideNav}
            onSelect={(selected) => {
                // Add your code here
            }}
          >
            <SideNav.Toggle  />
            <SideNav.Nav  defaultSelected="home">
                <NavItem eventKey="home">
                    <NavIcon>
                        <Link to="/"><img src={Dash}/></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/">Dashboard</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="sites">
                    <NavIcon>
                      <Link to="/sites"><img src={Site} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/sites">Sites</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="tours">
                  <NavIcon>
                    <Link to="/tours"><img src={Tour}/></Link>
                  </NavIcon>
                  <NavText>
                      <Link to="/tours">Tours</Link>
                  </NavText>
                </NavItem>
                <NavItem eventKey="media">
                    <NavIcon>
                      <Link to="/media"><img src={Media}/> </Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/media">Media</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="newSite">
                    <NavIcon>
                        <Link to="/newSite/details"><img src={NewSite} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/newSite/details">Add new Site</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="profile">
                    <NavIcon>
                        <Link to="/profile"><img src={Profile} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/profile">Profile</Link>
                    </NavText>
                </NavItem>

            </SideNav.Nav>
          </SideNav>
        </div>
        <Routes />
      </div>
    );
  }
}

export default App;

此外，您可以在此处查看其工作原理https://reactjs.org/docs/state-and-lifecycle.html