我的页面侧面有一个导航栏,我从网站上获取了代码。目前它在顶部有一个按钮,当用户点击它时它会展开。但是我希望当用户将鼠标悬停在它上面时它会展开。并在鼠标离开时展开。但是,它是使用 react-bootstrap 编码的,所以我不确定如何编辑它。有什么想法吗?
导航栏:
<div className="App container">
<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>
<Routes />
</div>
最佳答案
就我个人而言,我认为这是一个非常糟糕、难以访问的 UX 设计,但如果您想继续这样做,您需要实现一个 onMouseEnter 处理程序,如下所示:
handleOnMouseEnter(path) {
const { history } = this.props;
console.log("handleOnMouseEnter: ", path);
history.push(path);
}
为了访问 props 中的 history
对象,您需要将您的组件包装在 withRouter
HOC 中,如下所示:
const WrappedApp = withRouter(App);
const rootElement = document.getElementById("root");
ReactDOM.render(
<Router>
<WrappedApp />
</Router>,
rootElement
);
然后你的 NavItem 看起来像这样:
<NavItem
eventKey="sites"
onMouseEnter={() => this.handleOnMouseEnter("/sites")}
>
<NavText>
<Link to="/sites">Sites</Link>
</NavText>
</NavItem>
请参阅this CodeSandbox用于工作实现。
关于javascript - 悬停展开导航,而不是点击触发器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54635109/