如何在鼠标悬停时打开react-bootstrap的Dropdown? [英] How can I make react-bootstrap's Dropdown open on mouse hover?

问题描述

好，问题很简单.我需要在鼠标悬停而不是单击时打开下拉列表.

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页面在此处反应引导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的Dropdown?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！