javascript - 如何在鼠标悬停时打开 react-bootstrap Dropdown？

Question

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

目前我的代码如下。

    <Nav>
      <NavDropdown
        onMouseEnter = {()=> isOpen=true}
        open={isOpen}
        noCaret
        id="language-switcher-container"
      >
        <MenuItem>Only one Item</MenuItem>
      </NavDropdown>
    </Nav>

如您所见，我尝试了 onMouseEnter 但没有效果。有人可以解决这个问题吗？我应该传递什么属性来实现这一点。

API 页面在这里react-bootstrap API page

Answer 1

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>
    )
  }
}

希望这能解决您的问题。