问题描述
我的页面旁边有一个导航栏。 我是通过反应引导程序网站得到的，所以类名等都是预先加载的。 我希望在鼠标输入/离开时使用切换汉堡徽标来展开/折叠导航，而不是使用切换汉堡徽标。 下面是我到目前为止的尝试，我已经为鼠标输入和离开做了2个处理程序，并且我使用了inspect元素，因此在扩展和折叠时列出导航的类名。
然后我试图给导航这些类名称取决于鼠标是否在导航中，但它不起作用:(帮助请
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;
1楼
Luccas Paroni
3
已采纳
2019-02-25 11:45:51
我认为你应该在组件的状态中使用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;
此外，你可以在这里看到这是如何工作的