javascript - 在鼠标进入/离开时展开和折叠导航，REACT

Question

我的页面旁边有一个导航栏。我是通过一个 react 引导网站得到它的，所以类名等是预加载的。我不想使用切换汉堡包 Logo 来展开/折叠导航，而是希望在鼠标进入/离开时进行操作。以下是我到目前为止的尝试，我已经为鼠标进入和离开制作了 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，因为这是重新呈现元素的 react 方式。每次使用 setSate 时，React 都会搜索代码中的更改以显示您想要的内容。当你只是更新你的变量时， 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