如何在鼠标悬停时打开 react-bootstrap 的下拉菜单? [英] How can I make react-bootstrap's Dropdown open on mouse hover?
本文介绍了如何在鼠标悬停时打开 react-bootstrap 的下拉菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
好吧,问题很简单.我需要在鼠标悬停而不是点击时打开下拉菜单.
Ok the question is simple. I need to make the dropdown open when mouse hover rather than on click.
目前我的代码如下.
<Nav>
<NavDropdown
onMouseEnter = {()=> isOpen=true}
open={isOpen}
noCaret
id="language-switcher-container"
>
<MenuItem>Only one Item</MenuItem>
</NavDropdown>
</Nav>
如你所见,我试过 onMouseEnter 但没有效果.有人可以解决这个问题吗?我应该传入什么属性来实现这一点.
as you can see, I tried onMouseEnter but no effect. Can someone solve this issue? What attribute should I pass in to achive this.
API 页面在这里 react-bootstrap API 页面>
The API page is here react-bootstrap API page
推荐答案
export class Nav extends React.Component {
constructor(props) {
super(props)
this.state = { isOpen: false }
}
handleOpen = () => {
this.setState({ isOpen: true })
}
handleClose = () => {
this.setState({ isOpen: false })
}
render() {
return (
<Nav>
<NavDropdown
onMouseEnter = { this.handleOpen }
onMouseLeave = { this.handleClose }
open={ this.state.isOpen }
noCaret
id="language-switcher-container"
>
<MenuItem>Only one Item</MenuItem>
</NavDropdown>
</Nav>
)
}
}
希望这能解决您的问题.
Hope this solves your issue.
这篇关于如何在鼠标悬停时打开 react-bootstrap 的下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文